/* BinderWorth 3.41 · Individual set checklist redesign.
   This stylesheet only targets the set detail dialog. The collector's live
   collection, filters, set modes, chase targets and trading tools are unchanged. */

#setModal .set-modal-frame {
  scrollbar-gutter: stable !important;
  padding-bottom: max(42px, env(safe-area-inset-bottom)) !important;
}
#setModal .set-detail-topbar {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22) !important;
}
#setModal .set-detail-back:focus-visible,
#setModal button:focus-visible,
#setModal .set-card-toolbar input:focus-visible,
#setModal summary:focus-visible {
  outline: 2px solid #53d9cc !important;
  outline-offset: 3px !important;
}
#setModal .set-detail-hero {
  margin-bottom: 12px !important;
  padding: 16px 18px !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 12px 18px !important;
}
#setModal .set-logo-wrap {
  width: 112px !important;
  height: 96px !important;
  padding: 10px !important;
  border-radius: 17px !important;
}
#setModal #setModalName {
  font-family: inherit !important;
  font-weight: 850 !important;
  font-size: clamp(23px, 3vw, 33px) !important;
  letter-spacing: -.045em !important;
  line-height: 1.07 !important;
}
#setModal #setModalSeries { font-size: 10px !important; }
#setModal #setModalMeta { font-size: 11px !important; margin-top: 7px !important; }
#setModal .set-detail-actions {
  grid-template-columns: minmax(0,1fr) minmax(220px,1fr) !important;
  gap: 8px !important;
}
#setModal #pinSetBtn { min-height: 40px !important; }
#setModal .set-progress-card {
  padding: 13px 16px !important;
  margin-bottom: 18px !important;
  grid-template-columns: 84px minmax(0,1fr) !important;
  gap: 10px 14px !important;
  border-radius: 17px !important;
  background: linear-gradient(120deg,rgba(19,48,46,.8),rgba(9,25,28,.9)) !important;
}
#setModal .set-progress-ring {
  width: 76px !important;
  height: 76px !important;
}
#setModal #setModalCompletion { font-size: 27px !important; margin-top: 5px !important; }
#setModal .set-progress-stats { margin-top: 8px !important; gap: 6px !important; }
#setModal .set-progress-stats b { font-size: 14px !important; }
#setModal .set-progress-stats small { font-size: 9px !important; }
#setModal #setModalMissing { margin-top: 6px !important; font-size: 10px !important; }
#setModal .set-progress-track.large { height: 7px !important; margin: 0 !important; }

#setModal .set-checklist-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 0 2px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
}
#setModal .set-checklist-heading > div { min-width: 0 !important; }
#setModal .set-checklist-heading .eyebrow {
  color: #e3af59 !important;
  margin: 0 0 4px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .14em !important;
}
#setModal .set-checklist-heading h3 {
  margin: 0 !important;
  color: #f5f1e8 !important;
  font-family: inherit !important;
  font-size: 23px !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
}
#setModal .set-checklist-heading p:not(.eyebrow) {
  margin: 6px 0 0 !important;
  color: #98aaa5 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
#setModal .set-checklist-heading-mark {
  flex: 0 0 35px !important;
  width: 35px !important;
  height: 35px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(70,213,192,.22) !important;
  background: rgba(48,175,160,.09) !important;
  color: #7ae5d5 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}
#setModal .set-card-toolbar { gap: 9px !important; }
#setModal .segmented {
  padding: 5px !important;
  gap: 5px !important;
  border: 1px solid rgba(233,181,88,.14) !important;
  background: #0a1517 !important;
}
#setModal .segmented button {
  min-height: 43px !important;
  min-width: 90px !important;
  padding: 9px 11px !important;
  border-radius: 11px !important;
  font-size: 11px !important;
  color: #b7c2bd !important;
}
#setModal .segmented button.active {
  background: #efb650 !important;
  color: #1b1b16 !important;
  box-shadow: 0 3px 10px rgba(239,182,80,.14) !important;
}
#setModal .segmented button span { font-size: 10px !important; }
#setModal .filter-field.compact { background: #0c181b !important; border-color: rgba(255,255,255,.13) !important; }
#setModal .filter-field.compact input { color: #eeeae0 !important; font-size: 14px !important; }
#setModal .set-card-status {
  padding: 8px 3px 1px !important;
  font-size: 11px !important;
  color: #a3b2ae !important;
}

#setModal .set-card-grid {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 12px !important;
  margin: 4px 0 0 !important;
  padding: 2px 2px 12px !important;
  max-height: none !important;
  overflow: visible !important;
}
#setModal .set-card-grid > .empty-state { grid-column: 1/-1 !important; }
#setModal .set-card-tile,
#setModal .set-card-tile.missing {
  border-style: solid !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg,#142021,#0c1618) !important;
  border-color: rgba(225,172,78,.26) !important;
  padding: 9px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.1) !important;
}
#setModal .set-card-tile.owned {
  border-style: solid !important;
  border-color: rgba(60,203,178,.35) !important;
  background: linear-gradient(180deg,#112522,#0c1918) !important;
}
#setModal .set-card-tile.part-owned { border-color: rgba(142,112,238,.4) !important; }
#setModal .set-card-image {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 245 / 337 !important;
  border-radius: 11px !important;
  background: #091112 !important;
}
#setModal .set-card-image img {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
}
#setModal .set-card-image > b {
  background: rgba(22,31,34,.93) !important;
  color: #e3c589 !important;
  border: 1px solid rgba(235,183,85,.22) !important;
  font-size: 9px !important;
  padding: 5px 7px !important;
}
#setModal .set-card-tile.owned .set-card-image > b {
  background: rgba(11,68,58,.93) !important;
  color: #abf6e6 !important;
  border-color: rgba(50,212,184,.32) !important;
}
#setModal .set-card-info { padding: 11px 2px 10px !important; min-height: 0 !important; }
#setModal .set-card-info strong {
  color: #f1eee6 !important;
  font-size: 14px !important;
  line-height: 1.23 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#setModal .set-card-info small { margin-top: 5px !important; color: #e4bb71 !important; font-size: 11px !important; line-height: 1.3 !important; }
#setModal .variant-chips { gap: 5px !important; margin-top: 10px !important; }
#setModal .variant-chips span { font-size: 9px !important; padding: 5px 7px !important; border-radius: 7px !important; }
#setModal .set-card-cost { display: block !important; color: #8cdccc !important; font-size: 10px !important; margin-top: 5px !important; }
#setModal .set-card-actions {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 7px !important;
  margin-top: auto !important;
}
#setModal .set-card-actions .button {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 39px !important;
  border-radius: 10px !important;
  padding: 8px 7px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  cursor: pointer !important;
}
#setModal .set-card-actions [data-add-card] {
  grid-column: 1/-1 !important;
  background: linear-gradient(180deg,#f2c16a,#dfa144) !important;
  border: 1px solid #e9b252 !important;
  color: #212017 !important;
  min-height: 42px !important;
}
#setModal .set-card-actions [data-edit] {
  grid-column: 1/-1 !important;
  background: #172d2a !important;
  border: 1px solid rgba(67,208,178,.34) !important;
  color: #b0f4e3 !important;
}
#setModal .set-card-actions [data-toggle-wanted],
#setModal .set-card-actions [data-want-card-missing] {
  border: 1px solid rgba(235,189,99,.3) !important;
  background: rgba(234,177,68,.04) !important;
  color: #e8c58b !important;
}
#setModal .set-card-actions [data-find-card] {
  border: 1px solid rgba(62,204,192,.4) !important;
  background: rgba(42,159,151,.13) !important;
  color: #a4f0e7 !important;
}

#setModal .set-detail-toolkit {
  margin-top: 26px !important;
  padding-top: 19px !important;
  border-top: 1px solid rgba(239,177,72,.24) !important;
}
#setModal .set-detail-toolkit-heading {
  padding: 0 2px 10px !important;
}
#setModal .set-detail-toolkit-heading .eyebrow {
  margin: 0 0 5px !important;
  color: #e5b566 !important;
  font-size: 10px !important;
  letter-spacing: .13em !important;
  font-weight: 900 !important;
}
#setModal .set-detail-toolkit-heading h3 {
  margin: 0 !important;
  font-family: inherit !important;
  color: #f3f0e9 !important;
  font-size: 21px !important;
  letter-spacing: -.035em !important;
}
#setModal .set-detail-toolkit-heading p:not(.eyebrow) {
  margin: 6px 0 0 !important;
  color: #96a8a2 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}
#setModal .set-detail-toolkit > .set-focus-action { margin: 10px 0 !important; }
#setModal .set-detail-toolkit > .set-shopping-actions-secondary { margin: 0 0 12px !important; }
#setModal .set-detail-toolkit > .set-completion-intel {
  width: 100% !important;
  margin: 12px 0 !important;
  border-radius: 18px !important;
}
#setModal .set-detail-toolkit > .set-buying-insights { margin: 12px 0 !important; }
#setModal .set-affiliate-note { padding-top: 12px !important; margin-top: 14px !important; }

@media (min-width: 721px) {
  #setModal .set-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  #setModal .set-card-actions .button { font-size: 10.5px !important; }
}
@media (max-width: 720px) {
  #setModal .set-modal-frame {
    width: 100% !important;
    padding: 0 14px max(26px,env(safe-area-inset-bottom)) !important;
    scrollbar-gutter: auto !important;
  }
  #setModal .set-detail-hero {
    padding: 13px 14px !important;
    margin: 0 -14px 10px !important;
    grid-template-columns: 70px minmax(0,1fr) !important;
    gap: 10px 12px !important;
  }
  #setModal .set-logo-wrap {
    width: 70px !important;
    height: 65px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }
  #setModal #setModalName { font-size: clamp(21px,6vw,27px) !important; }
  #setModal #setModalSeries { font-size: 9px !important; }
  #setModal #setModalMeta { font-size: 9.5px !important; margin-top: 5px !important; }
  #setModal .set-detail-actions {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 7px !important;
  }
  #setModal #pinSetBtn { min-height: 38px !important; font-size: 10px !important; border-radius: 11px !important; }
  #setModal .mode-switch button { min-height: 30px !important; font-size: 10px !important; }
  #setModal .set-progress-card {
    grid-template-columns: 69px minmax(0,1fr) !important;
    gap: 9px !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
  }
  #setModal .set-progress-ring { width: 62px !important; height: 62px !important; }
  #setModal .set-progress-ring-label strong { font-size: 17px !important; }
  #setModal .set-progress-ring-label span { font-size: 6.5px !important; }
  #setModal #setCompletionLabel { font-size: 9px !important; }
  #setModal #setModalCompletion { font-size: 25px !important; }
  #setModal .set-progress-stats { gap: 3px !important; margin-top: 7px !important; }
  #setModal .set-progress-stats b { font-size: 12px !important; }
  #setModal .set-progress-stats small { font-size: 8px !important; }
  #setModal #setModalMissing { font-size: 9px !important; }
  #setModal .set-checklist-heading { margin-bottom: 11px !important; padding-bottom: 10px !important; }
  #setModal .set-checklist-heading h3 { font-size: 21px !important; }
  #setModal .set-checklist-heading p:not(.eyebrow) { font-size: 10px !important; }
  #setModal .set-checklist-heading-mark { width: 31px !important; height: 31px !important; flex-basis: 31px !important; }
  #setModal .segmented button { min-height: 42px !important; min-width: 84px !important; font-size: 10px !important; }
  #setModal .set-card-grid {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 9px !important;
  }
  #setModal .set-card-tile, #setModal .set-card-tile.missing {
    display: grid !important;
    grid-template-columns: 105px minmax(0,1fr) !important;
    grid-template-rows: auto minmax(0,1fr) !important;
    align-items: start !important;
    column-gap: 13px !important;
    row-gap: 5px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }
  #setModal .set-card-image {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 105px !important;
    height: auto !important;
    aspect-ratio: 245 / 337 !important;
  }
  #setModal .set-card-image img { width: 100% !important; height: 100% !important; }
  #setModal .set-card-image > b {
    top: 5px !important; left: 5px !important;
    padding: 4px !important; font-size: 7px !important;
  }
  #setModal .set-card-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 2px 0 0 !important;
  }
  #setModal .set-card-info strong { font-size: 14px !important; line-height: 1.23 !important; }
  #setModal .set-card-info small { font-size: 10.5px !important; }
  #setModal .variant-chips { gap: 3px !important; margin-top: 6px !important; }
  #setModal .variant-chips span { font-size: 8px !important; padding: 4px !important; }
  #setModal .set-card-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
  }
  #setModal .set-card-actions .button {
    min-height: 38px !important;
    padding: 6px 5px !important;
    font-size: 9.5px !important;
  }
  #setModal .set-card-actions [data-add-card] { min-height: 41px !important; }
  #setModal .set-detail-toolkit { margin-top: 20px !important; padding-top: 16px !important; }
  #setModal .set-detail-toolkit-heading h3 { font-size: 19px !important; }
  #setModal .set-detail-toolkit > .set-completion-intel { margin: 10px 0 !important; }
}
@media (max-width: 390px) {
  #setModal .set-detail-actions { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  #setModal #pinSetBtn { font-size: 9px !important; }
  #setModal .set-progress-card { grid-template-columns: 60px minmax(0,1fr) !important; padding: 10px !important; }
  #setModal .set-progress-ring { width: 54px !important; height: 54px !important; }
  #setModal #setModalCompletion { font-size: 22px !important; }
  #setModal .set-card-tile, #setModal .set-card-tile.missing {
    grid-template-columns: 86px minmax(0,1fr) !important;
    column-gap: 10px !important;
    padding: 8px !important;
  }
  #setModal .set-card-image { width: 86px !important; }
  #setModal .set-card-info strong { font-size: 13px !important; }
  #setModal .set-card-actions .button { font-size: 9px !important; min-height: 36px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #setModal .set-card-tile,
  #setModal .set-progress-track i { transition: none !important; }
}