/* =========================================================
   SETTINGS PAGE
   ========================================================= */

.setting-group {
  margin-bottom: var(--space-4);
}

.setting-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.setting-group__head svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);

  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
}

.setting__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.setting__title {
  font-weight: 600;
}

.setting__sub {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.setting__control {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.setting--muted {
  opacity: 0.45;
  pointer-events: none;
}

/* The whole row is the switch label, so the track sits right. */
label.setting {
  cursor: pointer;
}

@media (max-width: 560px) {
  .setting {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* A switch is small enough to stay beside its label, which keeps
     the long list of toggles scannable on a phone. */
  label.setting.switch {
    flex-direction: row;
    align-items: center;
  }

  /* A select sizes itself to its longest option, which can run past
     the edge of a phone; stacked rows give it the full width instead. */
  .setting > .select {
    width: 100%;
    max-width: 100%;
  }
}


/* ---------------------------------------------------------
   ACCOUNT
   --------------------------------------------------------- */

.account-panel {
  display: flex;
  align-items: center;
  gap: var(--space-4);

  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.account-panel__text {
  flex: 1;
  min-width: 0;
}

.account-panel__name {
  font-weight: 650;
}

.account-panel__sub {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.account-panel__actions {
  display: flex;
  gap: var(--space-2);
  flex: none;
}

.account-panel .avatar {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

@media (max-width: 560px) {
  .account-panel {
    flex-wrap: wrap;
  }

  .account-panel .btn {
    width: 100%;
  }
}


/* ---------------------------------------------------------
   SHORTCUTS
   --------------------------------------------------------- */

.shortcuts {
  display: flex;
  flex-direction: column;
}

.shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);

  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------
   GEM REALISM CONTROL
   --------------------------------------------------------- */
.setting--realism { align-items: flex-start; }
.realism-control { width: min(100%, 620px); display: grid; gap: .55rem; }
.realism-control__labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; color: var(--text-muted); font-size: .67rem; text-align: center; line-height: 1.1; }
.realism-control__labels span:first-child { text-align: left; }
.realism-control__labels span:last-child { text-align: right; }
.realism-range-wrap {
  position: relative;
  width: 100%;
  padding: .2rem 0;
}
.realism-range {
  --realism-progress: 0%;
  position: relative;
  z-index: 2;
  appearance: none; width: 100%; height: 1.1rem; background: transparent; cursor: pointer; margin: 0;
}
.realism-control__ticks {
  position: absolute;
  z-index: 1;
  left: .6rem;
  right: .6rem;
  top: 50%;
  height: .46rem;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  pointer-events: none;
}
.realism-control__ticks span {
  justify-self: center;
  width: .28rem;
  height: .28rem;
  margin-top: .09rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 75%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 80%, transparent);
}
.realism-range::-webkit-slider-runnable-track {
  height: .46rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 var(--realism-progress), color-mix(in srgb, var(--border) 88%, transparent) var(--realism-progress) 100%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .25), 0 0 0 1px rgb(255 255 255 / .04);
}
.realism-range::-moz-range-track { height: .46rem; border-radius: 999px; background: color-mix(in srgb, var(--border) 88%, transparent); }
.realism-range::-moz-range-progress { height: .46rem; border-radius: 999px; background: var(--accent); }
.realism-range::-webkit-slider-thumb { appearance: none; width: 1.2rem; height: 1.2rem; margin-top: -.37rem; border-radius: 50%; border: 2px solid var(--surface); background: var(--accent); box-shadow: 0 2px 9px rgb(0 0 0 / .35), 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.realism-range::-moz-range-thumb { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--surface); background: var(--accent); box-shadow: 0 2px 9px rgb(0 0 0 / .35), 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.realism-control__value { justify-self: center; min-width: 7rem; padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); color: var(--text); font-weight: 750; text-align: center; }
@media (max-width: 760px) { .setting--realism { display: grid; } .realism-control { width: 100%; } .realism-control__labels { font-size: .58rem; } }

.qol-settings-nav,.qol-filter-tools {display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;align-items:center}
.qol-filter-bulk { display:flex; flex-wrap:wrap; gap:8px; align-items:center; width:100%; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--surface-sunken); }
.qol-filter-bulk[hidden] { display:none; }
.qol-filter-row {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.qol-filter-row span {overflow-wrap:anywhere} [id$="Heading"] {scroll-margin-top:90px}
.qol-filter-row__gem { display:flex; flex-direction:column; gap:2px; font-weight:700; }
.qol-filter-row__gem small { color:var(--text-muted); font-weight:500; }
.qol-rule-buttons { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:5px; }
.qol-rule-button { min-height:40px; padding:7px 10px; border:1px solid var(--border); border-radius:9px; background:var(--surface-sunken); color:var(--text-muted); font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; }
.qol-rule-button.is-active { border-color:var(--accent); background:var(--accent-soft); color:var(--text); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
.qol-rule-button[data-direct-rule="KEEP"].is-active { border-color:var(--positive); color:var(--positive); }
.qol-rule-button[data-direct-rule="SELL"].is-active { border-color:var(--negative); color:var(--negative); }

.setting__copy strong,.setting__copy span {display:block}
.setting__copy span {color:var(--text-muted);font-size:var(--text-sm)}

#clearLegacyFilter[hidden] {display:none}

@media (max-width: 720px) {
  .qol-settings-nav {
    position: sticky;
    top: 58px;
    z-index: 35;
    flex-wrap: nowrap;
    margin-inline: -12px;
    padding: 8px 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    background: color-mix(in srgb,var(--bg) 94%,transparent);
    scrollbar-width: none;
  }
  .qol-settings-nav::-webkit-scrollbar { display:none; }
  .qol-settings-nav .btn { flex:0 0 auto; min-height:44px; }
  .qol-filter-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .qol-filter-tools > input { grid-column:1 / -1; width:100%; }
  .qol-filter-tools > .select { min-width:0; width:100%; }
  .qol-filter-bulk { grid-column:1 / -1; display:grid; grid-template-columns:1fr; }
  .qol-filter-row { grid-template-columns:auto minmax(0,1fr); gap:8px; }
  .qol-filter-row__gem { min-width:0; }
  .qol-rule-buttons { grid-column:1 / -1; width:100%; }
  .qol-rule-button { min-height:44px; }
}