.detail-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

/* ── Sidebar (infobox) + main card, side by side ── */
.detail-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* ── Back button ── */
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px 16px;
  background-color: var(--accent);
  color: black;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}
.back-button:hover { background-color: var(--accent-dim); }
.back-arrow {
  display: inline-block;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid currentColor;
  flex-shrink: 0;
}

#content {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

#content.detail-content-ready {
  opacity: 1;
  transform: translateY(0);
}

#content.detail-content-loading {
  opacity: 0;
  transform: translateY(6px);
}

/* ── Unified card ── */
.item-card {
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
  background: #161616;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  margin-bottom: 0;
  margin-left: -1px;
  flex: 1;
  min-width: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ── Infobox: standalone sidebar card, sibling of .item-card, flush against it ── */
.infobox {
  width: var(--infobox-w, 386px);
  flex-shrink: 0;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  background: #161616;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.infobox-image {
  background: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.infobox-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.infobox-rows { display: flex; flex-direction: column; flex: 1; }
.infobox-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-subtle); flex: 1; }
.infobox-row:last-child { border-bottom: none; }
.infobox-budget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 2px solid var(--accent);
  background: #121212;
  text-align: center;
}
.infobox-budget-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  width: 100%;
}
.infobox-budget-main img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.infobox-budget-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.infobox-budget-tier {
  font-size: 10px;
  color: var(--text-muted);
}

.infobox-label {
  font-weight: 700;
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 9px;
  width: 70px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle);
  background: var(--card-bg);
  display: flex;
  align-items: center;
  align-self: stretch;
  line-height: 1.2;
}

.infobox-value {
  padding: 8px 10px;
  color: var(--text);
  flex: 1;
  min-width: 0;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* ── Right column: content blocks ── */
.right-panel {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}
.right-panel-title {
  padding: 16px 18px 14px;
  text-align: center;
  color: var(--accent);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  border-bottom: 1px solid var(--border-subtle);
}
.right-panel-block {
  padding: 14px 18px;
}
.block-category {
  padding-bottom: 1.25rem;
}
.block-conditions {
  padding-top: 0;
}
.right-panel-block + .right-panel-block {
  border-top: 1px solid var(--border-subtle);
}
.right-panel-block h2 {
  margin: 0 0 10px 0;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.entm-description {
  text-align: left;
  color: #b0b0b0;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-line;
}

/* ── Storefront row (full width, row 2) ── */
.storefront-row {
  grid-column: 1;
  grid-row: 2;
  border-top: 1px solid var(--border-subtle);
  padding: 14px 18px;
}
.storefront-row h2 {
  margin: 0 0 12px 0;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}

.infobox-value-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.infobox-value-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  gap: 7px;
  min-width: 0;
  width: 100%;
}
.infobox-value-row:has(.info-icon) {
  flex-wrap: nowrap;
}

/* Monospace technical value (model paths, editor/form IDs). min-width: 0
   + overflow-wrap keep it wrapping correctly inside a flex row instead
   of overflowing/getting clipped by an ancestor's overflow: hidden. */
.infobox-mono {
  font-family: monospace;
  font-size: 11px;
  word-break: normal;
  overflow-wrap: anywhere;
  min-width: 0;
  flex: 1 1 auto;
}

.infobox-value .budget-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Shared "?" / "✕" icon glyphs ──
   Both are inline SVGs built by makeQuestionIcon()/makeCloseIcon() in
   item-view.js rather than text characters - see the comment there.
   This class only sets the stroke styling; sizing comes from the
   width/height passed at creation, and centering comes from the
   containing element's flex centering (display:inline-flex + align/
   justify:center), which now has an exact, known-size box to center
   instead of font-dependent glyph ink. */
.icon-svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon-svg--close {
  transform: translateY(0px);
}

/* Small circular "?" marker that a detail tooltip is attached to (Model
   full paths, Material Swaps details) - see attachDetailTooltip in
   item-view.js. */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
@media (hover: hover) {
  .info-icon:hover { background: var(--text-muted); color: #1a1a1a; }
}
.h2--with-icon {
  display: flex;
  align-items: center;
  gap: 6px;
}
.info-icon--h2 {
  margin: 0;
  color: inherit;
  border-color: inherit;
  width: 15px;
  height: 15px;
}
@media (hover: hover) {
  .info-icon--h2:hover { background: var(--accent); color: #1a1a1a; }
}

/* ── Detail tooltip (Model paths / Material Swaps popovers) ──
   Positioned in JS directly above/below the "?" icon. Stays open on
   hover of the box itself (see attachDetailTooltip) so its monospace
   content can be selected/copied. */
.detail-tooltip {
  position: fixed;
  z-index: 9999;
  background: #121212;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 8px 10px;
  max-width: 90vw;
  box-shadow: 0 8px 20px rgba(0,0,0,0.7);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  user-select: text;
}
.detail-tooltip.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.detail-tooltip--sticky {
  cursor: default;
}
.detail-tooltip--assignable {
  max-width: 380px;
}
.detail-tooltip--assignable .detail-tooltip-line {
  word-break: normal;
  overflow-wrap: normal;
  text-align: center;
}
.detail-tooltip-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-family: monospace;
  font-size: 11px;
  color: var(--text);
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.detail-tooltip-line--word-wrap {
  word-break: normal;
  overflow-wrap: normal;
  text-align: center;
}
.detail-tooltip-line + .detail-tooltip-line {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}
.detail-tooltip-swap {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* ── Interactive path pill (click-to-copy inside model-path tooltips) ── */
.path-pill {
  font-family: monospace;
  font-size: 11px;
  color: #d1d5db;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
  word-break: break-word;
  line-height: 1.5;
  position: relative;
}
@media (hover: hover) {
  .path-pill:hover {
    background: rgba(229,193,88,0.15);
    color: var(--accent);
  }
}
.path-pill.copied {
  background: #2e7d32;
  color: transparent;
}
.path-pill.copied::after {
  content: 'Copied!';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: monospace;
  font-size: 11px;
  font-weight: 600;
}

/* ── Material swap tooltip: dynamic width ── */
.detail-tooltip--swap {
  width: max-content;
  min-width: 280px;
  max-width: min(90vw, 1100px);
}

#detail-mobile-tooltip.detail-tooltip--swap {
  width: 90vw;
  max-width: 90vw;
  text-align: left;
}

#detail-mobile-tooltip.detail-tooltip--swap .swap-header,
#detail-mobile-tooltip.detail-tooltip--swap .swap-mapping-row {
  grid-template-columns: 1fr auto 1fr;
}

/* ── Material swap pill-bar layout ── */
.swap-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0 0.5rem 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid #333;
}
.swap-header-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: center;
}
.swap-mapping-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 2px 0.5rem;
  border-radius: 4px;
}
.swap-mapping-row + .swap-mapping-row {
  margin-top: 2px;
}
.swap-arrow {
  font-size: 9px;
  color: var(--text-muted);
}

/* ── Swap pill: path + optional remap sub-pill ── */
.swap-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
  transition: background-color 0.15s ease;
  cursor: pointer;
  position: relative;
}
@media (hover: hover) {
  .swap-pill:hover { background: rgba(229,193,88,0.12); }
}
.swap-pill.copied {
  background: #2e7d32;
}
.swap-pill.copied > * { visibility: hidden; }
.swap-pill.copied::after {
  content: 'Copied!';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: monospace;
  font-size: 11px;
  font-weight: 600;
}

.path-text {
  font-family: monospace;
  font-size: 11px;
  color: #d1d5db;
  word-break: break-word;
  line-height: 1.5;
}

.remap-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: monospace;
  font-size: 10px;
  color: #888;
  margin-top: 2px;
  white-space: nowrap;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  position: relative;
  align-self: flex-start;
}
@media (hover: hover) {
  .remap-line:hover {
    color: var(--accent);
    background: rgba(229,193,88,0.1);
    border-color: rgba(229,193,88,0.25);
  }
}
.remap-label {
  color: #666;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.remap-line .remap-val {
  color: #ccc;
}
.remap-line.copied {
  color: transparent;
  background: #2e7d32;
  border-color: #2e7d32;
}
.remap-line.copied .remap-label,
.remap-line.copied .remap-val { color: transparent; }
.remap-line.copied::after {
  content: 'Copied!';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: monospace;
  font-size: 10px;
  font-weight: 600;
}

/* Mobile detail tooltip - bottom-of-screen popup */
#detail-mobile-tooltip {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  max-width: 95vw;
  background: #121212;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  z-index: 9999;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  border: 1px solid #333;
  box-shadow: 0 8px 20px rgba(0,0,0,0.7);
}
#detail-mobile-tooltip.show {
  opacity: 1;
}
#detail-mobile-tooltip .detail-tooltip-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-family: monospace;
  font-size: 11px;
  color: var(--text);
  justify-content: center;
  word-break: break-all;
  overflow-wrap: anywhere;
}
#detail-mobile-tooltip .detail-tooltip-line + .detail-tooltip-line {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}
#detail-mobile-tooltip .detail-tooltip-line--word-wrap {
  word-break: normal;
  overflow-wrap: normal;
  text-align: center;
}
#detail-mobile-tooltip .arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--accent);
  margin: 0 2px;
  vertical-align: middle;
  flex-shrink: 0;
}
@media (max-width: 400px) {
  #detail-mobile-tooltip {
    max-width: 95vw;
    font-size: 12px;
  }
}

/* Same triangle used between Build Menu Category pills, reused here
   between a material swap's source and target path. */
.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--accent);
  margin: 0 2px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Title ── */
.item-title {
  margin: 0 0 14px 0;
  color: var(--accent);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
}

.detail-inline-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-pill {
  background: #222222;
  border: 2px solid #2a2a2a;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 14px;
  color: #e0e0e0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.3;
  word-break: break-word;
  max-width: 420px;
}
.detail-pill-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}
.detail-pill img {
  width: auto;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.detail-pill-flavor {
  font-size: 11px;
  color: var(--text-muted);
  padding-left: 2px;
  line-height: 1.3;
}

.detail-connector {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  text-transform: uppercase;
}
.detail-connector-row {
  display: flex;
  align-items: center;
  margin: 8px 0;
  padding-left: 14px;
}

/* Used where a plain AND/OR connects two pills (Placement Conditions).
   Always a plain left-aligned stacked list - each pill on its own line with
   AND/OR shown as small left-aligned text between them. */
.detail-inline-wrap--conditions,
.detail-inline-wrap--conditions.is-wrapped {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
}

.detail-arrow {
  display: inline-block;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--accent);
  flex-shrink: 0;
}

.placement-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ── Player Buffs block ── */
.block-buffs {
  padding-top: 14px;
}
.buff-activation {
  color: #cccccc;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.buff-activation strong {
  color: #e0e0e0;
}
.buff-provides-label {
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 0.5rem;
}
.buff-options-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0 0.75rem;
}
.buff-option {
  margin-bottom: 0.6rem;
  color: #ccc;
  font-size: 0.9rem;
}
.buff-option strong {
  color: #e0e0e0;
}
.buff-details-list {
  list-style: none;
  padding-left: 1rem;
  margin: 0.2rem 0 0;
}
.buff-details-list li {
  font-size: 0.85rem;
  color: #b0b0b0;
}
.buff-details-list li::before {
  content: '○ ';
  color: #888;
}
.buff-footnote {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-style: italic;
}



.error-message {
  padding: 16px;
  background: #8b2c2c;
  color: #ff6b6b;
  border-radius: 6px;
  border: 2px solid #ff6b6b;
  margin: 16px 0;
}

/* ── Max Build Count ── */
.max-build-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.max-build-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text);
}
.max-build-stat img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.max-build-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
.max-build-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

/* ── Shares max build count with ── */
.shared-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 8px;
}
.shared-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shared-item {
  width: 80px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
@media (hover: hover) {
  .shared-item:hover { border-color: var(--accent); }
}
.shared-item img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.shared-item-name {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shared-view-more {
  width: 80px;
  min-height: 0;
  align-self: stretch;
  background: #1a1a1a;
  border: 1px dashed #666;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 6px;
  transition: border-color 0.15s, color 0.15s;
  box-sizing: border-box;
}
@media (hover: hover) {
  .shared-view-more:hover { border-color: var(--accent); color: var(--accent); }
}

/* ── Search bar + pager row used inside "view more" style modals ── */
.modal-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.modal-search-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 10px;
  background: #111;
  border: 1px solid #444;
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.modal-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.modal-pager-btn {
  width: 24px;
  height: 24px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s;
}
.modal-pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (hover: hover) {
  .modal-pager-btn:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
}
.modal-pager-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.shared-none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #555;
  font-size: 13px;
  box-sizing: border-box;
}
/* ── Prev / Next nav ── */
.item-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.item-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #5a4a00;
  color: #8a7a40;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  pointer-events: none;
  user-select: none;
  transition: background-color 0.2s ease;
}
.item-nav-btn.active {
  background-color: var(--accent);
  color: black;
  pointer-events: auto;
  cursor: pointer;
}
@media (hover: hover) {
  .item-nav-btn.active:hover { background-color: var(--accent-dim); }
}
.nav-arrow-left {
  display: inline-block;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid currentColor;
  flex-shrink: 0;
}
.nav-arrow-right {
  display: inline-block;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
  flex-shrink: 0;
}

/* ── Image fade-in on load ── */
img.lazy-fade {
  opacity: 0;
  transition: opacity 0.25s ease;
}
img.lazy-fade.loaded {
  opacity: 1;
}

.storefront-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.storefront-thumb {
  cursor: pointer;
  border: 2px solid #444;
  border-radius: 6px;
  overflow: hidden;
  background: #1a1a1a;
  transition: border-color 0.15s, transform 0.15s;
}
@media (hover: hover) {
  .storefront-thumb:hover {
    border-color: var(--accent);
    transform: scale(1.03);
  }
}
.storefront-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}

/* ── Lightbox ── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem 1.5rem;
  cursor: default;
  animation: lbFadeIn 0.15s ease;
}
.lightbox-overlay.closing {
  animation: lbFadeOut 0.15s ease forwards;
  pointer-events: none;
}
@keyframes lbFadeIn { from { opacity:0; } to { opacity:1; } }

/* ── Top bar: title + counter + close ── */
.lightbox-header {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  cursor: default;
}
.lightbox-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lightbox-counter {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}
.lightbox-close {
  width: 36px;
  height: 36px;
  margin-left: auto;
  background: rgba(255,255,255,0.08);
  color: #ccc;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease;
}
.lightbox-close:hover {
  background: rgba(229, 193, 88, 0.85);
  color: #000;
}
.lightbox-header,
.lightbox-nav {
  transition: opacity 300ms ease;
}
.lightbox-header.auto-hidden,
.lightbox-nav.auto-hidden {
  opacity: 0;
  pointer-events: none;
}
.lightbox-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: rgba(255,255,255,0.7);
  border-radius: 50%;
  animation: lb-spin 0.7s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes lb-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Main stage: centered image ── */
.lightbox-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  min-height: 0;
  /* Intentionally not clipped: a zoomed image should be able to visibly
     extend past this box's edges rather than being cut off at the stage
     boundary. The lightbox overlay itself covers the full viewport, so
     there's nothing meaningful for this to clip against anyway. */
  overflow: visible;
  cursor: pointer;
}
.lightbox-image-viewport {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(80vw, 800px);
  max-height: 75vh;
  min-width: 0;
  min-height: 0;
  cursor: zoom-in;
  touch-action: none;
}
.lightbox-image-viewport.zoomed-1 {
  cursor: zoom-in;
}
.lightbox-image-viewport.zoomed-2 {
  cursor: zoom-out;
}
.lightbox-image-viewport.zoomed-active {
  touch-action: none;
}
.lightbox-image-viewport.dragging {
  cursor: grabbing;
}
.lightbox-image-viewport img {
  min-width: 0;
  min-height: 0;
  max-width: min(90vw, 1024px); 
  max-height: 85vh; 
  object-fit: contain;
  display: block;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
  transition: transform 180ms ease;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
}

/* ── Navigation arrows: float at screen edges ── */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: #ccc;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  transition: background-color 150ms ease, color 150ms ease, opacity 300ms ease;
}
.lightbox-nav svg {
  display: block;
}
.lightbox-nav:hover {
  background: rgba(229, 193, 88, 0.85);
  color: #000;
}
.lightbox-nav-prev { left: 2rem; }
.lightbox-nav-next { right: 2rem; }

@media (max-width: 600px) {
  .lightbox-nav { display: none; }
}

/* ── Assignable/Display Info ── */
.assignable-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 8px;
}
.assignable-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.assignable-item {
  width: 80px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
@media (hover: hover) {
  .assignable-item:hover { border-color: var(--accent); }
}
.assignable-item img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.assignable-item-name {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assignable-view-more {
  width: 80px;
  min-height: 0;
  align-self: stretch;
  background: #1a1a1a;
  border: 1px dashed #666;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 8px;
  transition: border-color 0.15s, color 0.15s;
  box-sizing: border-box;
}
@media (hover: hover) {
  .assignable-view-more:hover { border-color: var(--accent); color: var(--accent); }
}

/* ── Assignable items modal ── */
.assignable-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: lbFadeIn 0.15s ease;
  overflow: hidden;
}
.assignable-modal-overlay.closing {
  animation: lbFadeOut 0.15s ease forwards;
  pointer-events: none;
}
@keyframes lbFadeOut { from { opacity: 1; } to { opacity: 0; } }
.assignable-modal-wrap {
  position: relative;
  max-width: 560px;
  width: 90vw;
  /* dvh keeps this honest on mobile browsers whose chrome (address bar,
     etc.) eats into vh - falls back to vh where dvh isn't supported. */
  max-height: 85vh;
  max-height: min(85vh, 85dvh);
  display: flex;
  flex-direction: column;
  cursor: default;
  animation: assignableModalIn 0.18s ease;
  background: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  /* Header and body below both paint the same #1e1e1e background and
     have no radius of their own - this clips them to the wrap's rounded
     corners so the two pieces still read as one seamless card. */
  overflow: hidden;
}
.assignable-modal-overlay.closing .assignable-modal-wrap {
  animation: assignableModalOut 0.15s ease forwards;
}
@keyframes assignableModalIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes assignableModalOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.94); }
}
.assignable-modal {
  background: #1e1e1e;
  border: none;
  padding: 0 20px 20px 20px;
  /* Scrolls independently of the header below - this is what lets the
     ✕ sit flush in the wrap's corner regardless of scrollbar width, and
     what lets the header stay put while only the body shrinks/scrolls
     on short viewports. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
}
.assignable-modal-header {
  display: flex;
  align-items: center;
  padding: 12px 16px 10px 20px;
  gap: 8px;
  flex-shrink: 0;
  background: #1e1e1e;
}
.assignable-modal-title {
  color: var(--accent);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 28px;
  white-space: nowrap;
}
.assignable-modal-close {
  width: 28px;
  height: 28px;
  background: #2b2b2b;
  color: var(--text-muted);
  border: 1px solid #444;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.assignable-modal-close:hover {
  background: var(--accent);
  color: black;
  border-color: var(--accent);
}
.assignable-modal-close:focus-visible,
.assignable-modal-back:focus-visible {
  background: var(--accent);
  color: black;
  border-color: var(--accent);
  outline: none;
}
.assignable-modal-back {
  width: 28px;
  height: 28px;
  background: #2b2b2b;
  color: var(--text-muted);
  border: 1px solid #444;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.assignable-modal-back .back-arrow { transform: translateX(-1.5px); }

/* ── Lightbox header back arrow - match close button sizing ── */
.lightbox-header .assignable-modal-back {
  width: 36px;
  height: 36px;
}
.lightbox-header .assignable-modal-back .back-arrow {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid currentColor;
  transform: translateX(-1px);
}
.assignable-modal-back:hover {
  background: var(--accent);
  color: black;
  border-color: var(--accent);
}

/* ── Modal tabs ── */
.assignable-modal-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.assignable-modal-tab {
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  position: relative;
  transition: color 0.15s;
}
@media (hover: hover) {
  .assignable-modal-tab:hover { color: var(--accent); }
}
.assignable-modal-tab.active {
  color: var(--accent);
}
.assignable-modal-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent);
  border-radius: 1px;
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.assignable-modal-tab.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.assignable-modal-tab-content {
  display: none;
}
.assignable-modal-tab-content.active {
  display: block;
  animation: assignableTabContentIn 0.16s ease-out;
}
@keyframes assignableTabContentIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .assignable-modal-tab-content.active { animation: none; }
}

/* ── Header inside the view-more modal (tabs + filters + search) ── */
.modal-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #1e1e1e;
  padding-top: 0;
  padding-bottom: 8px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── ItemType filter row ── */
.modal-filter-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 10px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.modal-filter-row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .assignable-modal-wrap { max-width: 800px; }
  .modal-filter-row {
    flex-wrap: wrap;
    overflow-x: visible;
    white-space: normal;
  }
}
.modal-filter-chip {
  display: inline-flex;
  align-items: center;
  background: #2b2b2b;
  color: #a0a0a0;
  border: none;
  border-radius: 16px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
@media (hover: hover) {
  .modal-filter-chip:hover { background: #3a3a3a; color: #ccc; }
}
.modal-filter-chip.active {
  background: var(--accent);
  color: #000;
}
@media (hover: hover) {
  .modal-filter-chip.active:hover { background: #E5C158; }
}

/* Grid (not inline-flex) so rows share fixed column tracks: the whole
   block of tracks is centered via justify-content, but auto-placement
   fills each row left-to-right, so an incomplete final row lands in
   the same left-most columns as the rows above it instead of being
   centered on its own. */
.assignable-modal .assignable-grid,
.assignable-modal .shared-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 96px);
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 8px 0 0;
}

.assignable-none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #555;
  font-size: 13px;
  box-sizing: border-box;
}

/* ── Model Renders (non-thumbnail render images) ── */
.model-renders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 600px) {
  .detail-layout { flex-direction: column; align-items: stretch; }
  .infobox {
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
  }
  .item-card {
    margin-left: 0;
    margin-top: -1px;
    border-radius: 0 0 8px 8px;
  }
  .right-panel-title { font-size: 22px; }
  .detail-pill { max-width: 100%; }
  .storefront-thumb { aspect-ratio: 1; }
  .storefront-thumb img { width: 100%; height: 100%; }
  .info-icon {
    vertical-align: middle;
    margin-bottom: 0;
  }
}

/* ── Tablet: stack layout vertically, center infobox.
   Landscape tablets (900–1024px wide, e.g. older 1024×768 iPads)
   are deliberately excluded - they have enough horizontal room for
   the side-by-side layout, so they fall through to the default flex
   row (.detail-layout's base rule) instead of stacking and wasting
   width. Narrower landscape widths (601–899px, e.g. phones in
   landscape) still stack - a fixed 386px infobox would leave too
   little room for item-card at that width. ── */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
       (min-width: 601px) and (max-width: 899px) and (orientation: landscape) {
  .detail-layout {
    flex-direction: column;
    align-items: center;
  }
  .infobox {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 24px;
    border-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .item-card {
    margin-left: 0;
    margin-top: 0;
    border-radius: 8px;
    width: 100%;
    max-width: 700px;
  }
  .back-button,
  .item-nav {
    margin-left: 0;
  }
  .info-icon {
    vertical-align: middle;
    margin-bottom: 0;
  }
}

/* ── Desktop (+ landscape tablets): item-card is centered on the actual
   viewport - a third, empty grid column mirrors the infobox's width on
   the right, so the [infobox][item-card] pair sits symmetrically around
   center instead of the infobox's width dragging item-card off to one
   side. infobox still sits directly against item-card's left edge
   (adjacent grid columns, no gap) - it just isn't pinned to the literal
   screen edge anymore.

   This applies at 1025px+ (right above the tablet stacking breakpoint)
   AND at 900–1024px in landscape (tablets that skip stacking - see the
   tablet rule above). Without the second clause, that landscape-tablet
   band would fall through to the plain flex row and get the same
   asymmetric look this whole grid exists to avoid.

   --infobox-w shrinks fluidly toward the narrow end of this combined
   range (clamp floor 200px, low enough to leave item-card enough room
   at 900px) and grows back to its normal 386px by ~1930px viewport
   width. Both grid spacer columns read the same variable so they stay
   mirrored at every width. item-card's own floor (400px) is lowered to
   match - together they keep the layout from overflowing/squeezing at
   the narrow end. ── */
@media (min-width: 1025px),
       (min-width: 900px) and (max-width: 1024px) and (orientation: landscape) {
  .detail-container {
    --infobox-w: clamp(200px, 20vw, 386px);
    max-width: 1737px;
  }
  .back-button,
  .item-nav {
    margin-left: calc(var(--infobox-w) - 2px);
  }
  .detail-layout {
    display: grid;
    grid-template-columns: var(--infobox-w) minmax(400px, 1fr) var(--infobox-w);
    align-items: start;
  }
  .infobox {
    grid-column: 1;
    grid-row: 1;
  }
  .item-card {
    grid-column: 2;
    grid-row: 1;
  }
  /* grid-column 3 is intentionally left empty - a spacer equal to the
     infobox's width so item-card is centered on the viewport. */
}


/* ============================================================
   Merged improvements (previously item-view-improvements.css)
   Appended in original load order so cascade/output is identical
   to the old two-file setup - these rules intentionally come
   after the base rules above to override/refine them.
   ============================================================ */

/* ============================================================
   item-view-improvements.css - v3, verified against item-view.js
   Append after your existing item-view.css. Reuses --accent-secondary,
   --divider, and --bg-chip from style-improvements.css - make sure
   that file (or those variables) is loaded first.
   ============================================================ */

/* ── Description: left-align instead of centered.
   Centered multi-line body text is harder to scan - the eye has to
   re-find the start of each line. Left-aligned reads noticeably
   faster for anything longer than one sentence. ── */
.entm-description {
  text-align: left;
}
.entm-description-label {
  text-align: left;
}

/* ── Structural dividers shift from flat gray to a faint steel-blue
   tint, freeing amber to mean "important" rather than "everything" ── */
.infobox-row { border-bottom-color: var(--divider); }
.infobox-label { border-right-color: var(--divider); }
.right-panel-block + .right-panel-block,
.right-panel-title,
.storefront-row {
  border-color: var(--divider);
}

/* Technical/debug rows (Form ID, Editor ID, Model) are reference
   data, not primary content - de-emphasize them with plain muted
   grey rather than any accent color, so they read as secondary
   info without introducing a second hue on the page. */
.infobox-label {
  color: var(--text-muted);
}
.infobox-value {
  color: var(--text-muted);
}

/* Alternating section tint removed per feedback - with pills now
   using their own --bg-chip background (see below), tinting the
   section behind them too made the panel look busier, not calmer.
   Sections now separate purely by the divider line + whitespace. */

/* ── "Shares Max Build Count With" thumbnails.
   CORRECTED: this section is NOT .assignable-grid/.assignable-item
   (that's the separate "Assignables Info" block above it) - it's
   built from .shared-grid/.shared-item/.shared-item-name in
   item-view.js (~line 2050+). The previous version of this file
   only resized the Assignables Info tiles and never touched the
   ones visible in the screenshot. Both are fixed here now.

   FIX: the earlier version of this rule turned these into a
   horizontal-scroll strip (flex-wrap: nowrap + overflow-x: auto),
   but never gave the row a bounded width. Without min-width: 0 /
   width: 100% on the flex container, the browser sizes it to fit
   all the nowrap items at once - so instead of scrolling, the row
   just expanded past its column and bled out of the card. Reverted
   to normal wrapping (matches your original layout) with just the
   larger tile size kept. ── */
.shared-grid,
.assignable-grid {
  flex-wrap: wrap;
}
.shared-item,
.shared-view-more,
.shared-none,
.assignable-item,
.assignable-view-more,
.assignable-none {
  width: 96px;
}
.shared-item img,
.assignable-item img {
  width: 64px;
  height: 64px;
}
.shared-item-name,
.assignable-item-name {
  font-size: 10px;
  -webkit-line-clamp: 2;
}

/* ── Reduce nested amber borders ──
   Feedback: the page reads as box-in-a-box-in-a-box - outer card
   border > infobox/right-panel > section blocks > pill-groups > pills
   > icons, each with its own fence. Outer containers now use a subtle
   dark-gray border (#2a2a2a) with elevated surface, so amber is freed
   for text hierarchy only. ── */

/* Pills become flat chips: no border, subtle background, off-white text
   for maximum readability. Hierarchy from typography, not a fence. */
.detail-pill {
  border: none;
  border-radius: 6px;
  background: #222222;
  color: #e0e0e0;
}
.detail-pill-group {
  border: none;
  border-radius: 6px;
  background: #222222;
}
/* A pill inside a group would otherwise be a chip inside a chip -
   the exact nesting problem being fixed. Let the group's background
   carry the color; the inner pill goes transparent. */
.detail-pill-group .detail-pill {
  background: transparent;
}

/* Infobox title: item name above the image render. */
.infobox-title {
  padding: 14px 12px 10px;
  text-align: center;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--divider);
}

/* Infobox image / budget hero: hairline divider instead of a full
   2px accent rule under every block. Match the image's dark background
   so the two flow together as one visual unit. */
.infobox-image {
  background: #121212;
  border-bottom: 1px solid var(--divider);
}
.infobox-budget {
  background: #161616;
  border-bottom: 1px solid var(--divider);
}

/* Shared / assignable item tiles: background instead of a resting
   border. Accent border only appears on hover, so amber still means
   "you can act on this" instead of being permanent scaffolding
   around every single tile in a grid of 18. */
.shared-item,
.assignable-item,
.shared-view-more,
.assignable-view-more {
  border-color: transparent;
  background: var(--bg-chip);
}
@media (hover: hover) {
  .shared-item:hover,
  .assignable-item:hover {
    border-color: var(--accent);
  }
}

/* Max Build Count stat boxes: same background-over-border swap. */
.max-build-stat {
  border-color: transparent;
  background: var(--bg-chip);
}

/* ── Even out spacing around the section dividers in the right panel.
   The space BEFORE each divider was already consistent (both the
   description section and .block-category use 1.25rem of bottom
   padding before their line). The space AFTER a divider, before the
   next heading, was not:
     - description's line → "Build Menu Category": 34px
       (1.25rem margin-bottom on .entm-description-section
       + .block-category's default 14px padding-top)
     - category's line → "Placement Conditions": 0px
       (.block-conditions explicitly zeroed its padding-top)
   Normalized both to the panel's standard 14px top padding, so every
   divider has the same amount of breathing room above the heading
   that follows it. ── */
.entm-description-section {
  margin-bottom: 0;
}
.block-conditions {
  padding-top: 14px;
}

/* ── Inline preview grid row cap ──
   The ASSIGNABLES INFO, SHARES MAX BUILD COUNT WITH, and BUILD MENU SLOT
   grids in the item detail page are previews - they should never expand
   to show all 8,500+ items. JS builds each grid with all items, then
   trimPreviewGrids() measures the real rendered width to compute column
   count and trims to exactly 2 rows (3 on mobile) with a "+X more" tile
   as the final slot. The CSS max-height below is a safety net that
   matches the worst-case tile height (~102px per row + 8px gap) so if
   JS miscalculates, content still doesn't spill. */
.assignable-grid,
.shared-grid {
  overflow: hidden;
}
/* 2 rows on desktop/tablet: 2 × 102px tiles + 1 × 8px gap = ~212px */
@media (min-width: 601px) {
  .right-panel .assignable-grid,
  .right-panel .shared-grid {
    max-height: 220px;
  }
}
/* 3 rows on mobile: 3 × 102px tiles + 2 × 8px gaps = ~322px */
@media (max-width: 600px) {
  .right-panel .assignable-grid,
  .right-panel .shared-grid {
    max-height: 330px;
  }
}

/* ── Collapsible "Technical" accordion in infobox ── */
.tech-accordion {
  border-top: 1px solid var(--divider);
}
.tech-accordion-toggle {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Label sits in normal flow, centered by the flex container above -
   no reserved padding or absolute-position math needed. */
.tech-accordion-label {
  line-height: 1.2;
}
/* CSS border-triangle instead of a Unicode glyph (\25BE): glyph
   coverage depends on the active font-stack and can render as
   nothing on fonts that lack it. A border-triangle always renders,
   and matches the .back-arrow technique used elsewhere on this page.
   Absolutely positioned so it overlays without affecting the
   flex-centered label's available width. */
.tech-accordion-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.tech-accordion.open .tech-accordion-arrow {
  transform: translateY(-50%) rotate(180deg);
}
@media (hover: hover) {
  .tech-accordion-toggle:hover {
    background: rgba(255,255,255,0.04);
    color: #f0d68a;
  }
}
.tech-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.tech-accordion-body .infobox-row:last-child {
  border-bottom: none;
}

/* ── Assignable modal: mobile/tablet centered ── */
@media (max-width: 1024px) {
  .assignable-modal-overlay {
    align-items: center;
    padding: 16px;
  }
  .assignable-modal-wrap {
    width: 92vw;
    max-width: 560px;
    border-radius: 12px;
    max-height: 80vh;
    max-height: min(80vh, 80dvh);
  }
}

/* ── Extra shrink room on short viewports (landscape phones, small
   browser windows) - the body already scrolls internally via flex, but
   loosening the wrap's height ceiling further here means less of it
   needs to happen, and the fixed-size item image below shrinks with it
   instead of just pushing scroll. ── */
@media (max-height: 700px) {
  .assignable-modal-wrap {
    max-height: 92vh;
    max-height: min(92vh, 92dvh);
  }
  .assignable-modal-header {
    padding-top: 8px;
    padding-bottom: 6px;
  }
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   Resource Collection (resource collectors / extractors)
   Rendered by renderResourceCollection() in item-view.js from
   ResourceInfo.json. Compact styling mirrors the Player Buffs
   block (unbulleted mode list, tight rem typography); the drop
   table is borderless, constrained to a compact width, and
   flows down the page naturally (no internal scrollbars).
   ============================================================ */
.resource-collection {
  padding-bottom: 4px;
}
.resource-collection-meta {
  color: #ccc;
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}
.resource-collection-meta strong {
  color: #e0e0e0;
}

.resource-mode-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.resource-mode {
  margin-bottom: 24px;
  color: #ccc;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 641px) {
  .resource-mode {
    padding: 16px;
  }
}
.resource-mode:last-child {
  margin-bottom: 0;
}
.resource-mode-title strong {
  color: #e0e0e0;
}
/* Flex row so the stacking-info "?" icon centers against the text the
   same way the Model-path / Assignables icons do elsewhere on this page
   (see .infobox-value-row and .h2--with-icon) - vertical-align on its own
   isn't reliable here since this line mixes a <strong> tag with a plain
   text node. */
.resource-mode-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.resource-mode-title .info-icon {
  flex-shrink: 0;
}
/* Single-line compact meta row ("Interval: X • Fill Time: ~Y").
   Kept as one flowing text block (not a fixed-width table) so it
   wraps cleanly on narrow phones instead of ever constraining the
   drop table's column widths below it. */
.resource-mode-meta {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 4px 0 0.5rem;
  width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
}
.resource-mode-meta-sep {
  margin: 0 2px;
  opacity: 0.7;
}

/* ============================================================
   Resource drop table - semantic <table> markup, but laid out
   per-row with CSS Grid: table/thead/tbody are set to
   display:contents (so they don't generate boxes of their own)
   and each <tr> becomes its own grid container with an explicit
   grid-template-columns track list. This gives exact, matching
   pixel-width columns for the header row and every body row
   (unlike table-layout:fixed, which only supports percentages/
   auto and can drift out of alignment), and lets the ITEM column
   truncate cleanly instead of forcing horizontal scroll or
   wrapping at narrow widths (down to 375px).

   Mobile-first: the base rules below target small phones; the
   min-width:641px query restores the roomier desktop sizing.
   ============================================================ */
.resource-drops {
  display: block;
  width: 100%;
  max-width: 42rem;
  font-size: 0.78rem;
  margin: 0.3rem 0 0.5rem;
  box-sizing: border-box;
}
.resource-drops thead,
.resource-drops tbody {
  display: contents;
}
.resource-drops tr {
  display: grid;
  grid-template-columns: 36px 1fr 38px 65px 50px;
  column-gap: 2px;
  width: 100%;
  box-sizing: border-box;
}
/* Cells stretch to a uniform row height (grid default) and use flex to
   center their own content - this keeps every cell's bottom edge (and
   therefore the header underline / row borders below) lined up evenly,
   even though the icon column has no text and would otherwise be a
   different height than its neighbors. */
.resource-drops th,
.resource-drops td {
  display: flex;
  align-items: center;
  padding: 3px 4px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  box-sizing: border-box;
}
.resource-drops th {
  padding: 6px 4px;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* The underline lives on the header row itself, not individual <th>
   cells - a single continuous line unbroken by column-gap, rather
   than five separate per-cell borders with gaps between them. */
.resource-drops thead tr {
  border-bottom: 1px solid var(--divider);
}
.resource-drops th:not(.resource-col-name),
.resource-drops td:not(.resource-col-name):not(.resource-col-icon) {
  justify-content: center;
}

.resource-col-icon {
  justify-content: center;
  padding-left: 2px;
  padding-right: 0;
}
.resource-col-name {
  justify-content: flex-start;
}

/* Divider above the "nothing produced" row, set on the row itself for
   the same reason as the header underline (one continuous line). */
.resource-drops tr.resource-drop-nothing {
  border-top: 1px solid var(--divider);
}
.resource-drops tr.resource-drop-nothing td {
  padding-top: 8px;
}

@media (min-width: 641px) {
  .resource-drops {
    font-size: 0.85rem;
  }
  .resource-drops tr {
    grid-template-columns: 56px 1fr 80px 110px 80px;
    column-gap: 4px;
  }
  .resource-drops th,
  .resource-drops td {
    padding: 3px 8px;
  }
  .resource-drops th {
    padding: 6px 8px;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }
  .resource-drops tr.resource-drop-nothing td {
    padding-top: 10px;
  }
  .resource-col-icon {
    padding-left: 8px;
  }
}

/* Extra rows revealed by "Show more" live in a second table inside a
   height-animated wrapper - mirrors .tech-accordion-body's slide. */
.resource-more-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.resource-more-body .resource-drops {
  margin-top: 0;
}

.resource-drop-icon-link {
  display: inline-flex;
  width: 32px;
  height: 32px;
  margin: 0 auto;
}
.resource-drop-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  background: #161616;
  display: block;
  border: none;
  outline: none;
}
@media (min-width: 641px) {
  .resource-drop-icon-link,
  .resource-drop-icon {
    width: 36px;
    height: 36px;
  }
}
.resource-drop-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
}
@media (hover: hover) {
  a.resource-drop-icon-link:hover .resource-drop-icon { outline: 1px solid var(--accent); }
}

.resource-drops th:not(.resource-col-icon) {
  cursor: pointer;
  user-select: none;
}
@media (hover: hover) {
  .resource-drops th:not(.resource-col-icon):hover {
    color: var(--accent);
  }
}

/* Row hover only ever highlights the item name - quantity/chance/
   weight stay their normal color no matter where in the row the
   pointer is, and the header row is excluded entirely (tbody-scoped)
   so it never picks up the gold tint. */
.resource-drops tbody tr:hover {
  background: rgba(230, 184, 59, 0.08);
  transition: background 120ms ease;
}
.resource-drops tbody tr:hover .resource-drop-icon {
  outline: none;
  border: none;
}
@media (hover: hover) {
  .resource-drops tbody tr:hover .resource-drop-name {
    color: var(--accent);
  }
}

.resource-drops th[data-sort-dir]::after {
  display: inline-block;
  content: '\25B2';
  width: 9px;
  margin-left: 5px;
  text-align: center;
  font-size: 0.6rem;
  vertical-align: middle;
  animation: resource-sort-in 160ms ease-out;
}
.resource-drops th[data-sort-dir="desc"]::after {
  content: '\25BC';
  animation: resource-sort-flip 160ms ease-out;
}
@keyframes resource-sort-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes resource-sort-flip {
  from { opacity: 0.3; transform: rotate(-180deg); }
  to { opacity: 1; transform: rotate(0deg); }
}
.resource-drops th.resource-sort-leave::after {
  display: inline-block;
  animation: resource-sort-out 160ms ease-in forwards;
}
@keyframes resource-sort-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-3px); }
}

.resource-more-toggle {
  cursor: pointer;
  text-align: left;
  color: var(--accent);
  font-size: 0.85rem;
  margin: 6px 0 0;
  padding: 8px;
  background: var(--bg-chip);
  border-radius: 4px;
  max-width: 42rem;
}
@media (hover: hover) {
  .resource-more-toggle:hover { background: var(--divider); }
}