/* ————————————————————————————————————————————
   THE SCOPE PICKER AND THE LENS TOGGLE

   Both live in the world shell's lens bar, which is a 2.5rem strip under the top bar: everything
   here is sized to sit inside it without growing it, and wraps rather than scrolls when it cannot.

   Under 900px the bar cannot hold a five-control picker at any size a thumb can hit, so the picker
   moves into the rail DRAWER and the bar keeps the toggle alone. `.sx-scope--rail` is that copy;
   the two are the same component reading the same URL, so they can never disagree.
   ———————————————————————————————————————————— */

.sx-scope {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.sx-scope__world {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--sx-ink);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.sx-scope__world:hover {
  border-color: var(--sx-hairline);
}
.sx-scope__world.is-on {
  border-color: var(--sx-hairline);
  background: var(--sx-paper);
}

.sx-scope__sep {
  color: var(--sx-ink-30);
}

.sx-scope__or {
  margin-left: 0.4rem;
  color: var(--sx-ink-45);
  font-style: italic;
  white-space: nowrap;
}

/* The dropdown trigger, shrunk to bar height. The kit's own control, not a second one. */
/* ⛔ THE TRIGGER SHIPS `w-full` AND `h-10` FROM THE UI BASE. Unconstrained, each dropdown claims
   the whole bar and the five of them push the page sideways. `flex: 0 1 auto` with a real min and
   max is what lets the row wrap instead. */
.sx-scope .sx-scope__select {
  flex: 0 1 auto;
  width: auto;
  min-width: 7.5rem;
  max-width: 13rem;
  height: 1.9rem;
  padding-block: 0;
  font-size: 0.75rem;
}
.sx-scope .sx-scope__select.is-on {
  border-color: var(--sx-accent);
  color: var(--sx-accent);
}

/* A control that is present but not yet answerable — never removed, never silently absent. */
.sx-scope__inert {
  flex: 0 1 auto;
  height: 1.9rem;
  max-width: 9rem;
  font-size: 0.75rem;
  opacity: 0.55;
  cursor: not-allowed;
}

/* The level badge. Mono, because it prints a number that means a level, not a quantity. */
.sx-scope__badge {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--sx-hairline);
  border-radius: 999px;
  background: var(--sx-paper);
  color: var(--sx-ink-70);
  font-family: var(--sx-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ——— the lens toggle ——— */
.sx-lenstoggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--sx-hairline);
  border-radius: 999px;
  background: var(--sx-paper);
}
.sx-lenstoggle__btn {
  padding: 0.15rem 0.6rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sx-ink-70);
  font: inherit;
  font-size: 0.6875rem;
  cursor: pointer;
  white-space: nowrap;
}
.sx-lenstoggle__btn.is-on {
  background: var(--sx-accent);
  color: var(--sx-paper);
}

/* ——— desktop: the picker is in the bar, never in the drawer ——— */
.sx-scope--rail {
  display: none;
}

@media (max-width: 900px) {
  /* The bar keeps the toggle and the provenance badge; the picker moves into the drawer. */
  .sx-lensbar .sx-scope {
    display: none;
  }
  .sx-scope--rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0 0.5rem 1rem;
    font-size: 0.8125rem;
  }
  /* Stacked, the chevrons between the levels say nothing a column does not already say. */
  .sx-scope--rail .sx-scope__sep {
    display: none;
  }
  .sx-scope--rail .sx-scope__world,
  .sx-scope--rail .sx-scope__or {
    margin: 0;
    text-align: left;
  }
  /* 44px — the touch-target floor for every control inside the drawer. */
  .sx-scope--rail .sx-scope__select,
  .sx-scope--rail .sx-scope__inert {
    height: 44px;
    max-width: none;
    width: 100%;
    font-size: 0.875rem;
  }
  .sx-scope--rail .sx-scope__badge {
    align-self: flex-start;
  }
}

@media print {
  .sx-scope,
  .sx-lenstoggle {
    display: none;
  }
}
.sx-topic-explorer { padding: 1rem 1.5rem; color: var(--sx-ink); border-bottom: 1px solid var(--sx-hairline); }
.sx-topic-explorer label { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.sx-topic-explorer select { max-width: 100%; padding: .5rem; color: var(--sx-ink); background: var(--sx-paper); border: 1px solid var(--sx-hairline); border-radius: .4rem; }
.sx-topic-explorer section { margin-top: 1rem; max-width: 60rem; }
.sx-topic-explorer dt { font-weight: 600; margin-top: .6rem; text-transform: capitalize; }
.sx-topic-explorer dd { margin-left: 0; overflow-wrap: anywhere; }
.sx-topic-explorer pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; }
.sx-topic-explorer details { margin: .75rem 0; overflow-wrap: anywhere; }