/* ─────────────────────────────────────────────────────────────
   LM — bio translation toggle.

   One control, two homes: the full-profile About card (sits in the
   header row, left of the KYC pill) and the quick-profile modal.
   Deliberately quiet — it is an escape hatch, not a call to action,
   so it reads as secondary text rather than a button.

   Discover cards have no control at all by design.
   ───────────────────────────────────────────────────────────── */

/* Selector is `button.lm-tr-toggle`, not `.lm-tr-toggle`, on purpose:
   lm-profile.css carries `.lm-profile-page button { font-size: inherit }` at
   specificity (0,1,1), which outranks a lone class (0,1,0) no matter what order
   the sheets load in. Without the element qualifier the toggle renders at 14px —
   larger than the 13.5px card title it sits next to. */
button.lm-tr-toggle {
  margin-left: auto;   /* absorbs the free space → always flush right */
  margin-right: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--lm-text-muted, #6b7280);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(107, 114, 128, .35);
  transition: color .15s ease, text-decoration-color .15s ease;
}

button.lm-tr-toggle:hover,
button.lm-tr-toggle:focus-visible {
  color: var(--lm-green, #0f6f4f);
  text-decoration-color: currentColor;
}

button.lm-tr-toggle[hidden] { display: none; }

/* Profile: action row under the bio — "Show more" left, "Show original" right.
   Deliberately NOT in the .lm-card-head row: title + toggle + KYC pill crowded
   as soon as a stage name ran long, and the pill would drop to a second line.
   margin-left:auto on the toggle keeps it right-aligned even when "Show more"
   is absent (short bios), so the control never moves between profiles. */
.lm-bio-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
/* .lm-bio-toggle carries its own margin-top:4px from lm-profile.css — the row
   owns the spacing now, otherwise the two stack up. */
.lm-bio-actions .lm-bio-toggle { margin-top: 0; }

/* Quick-profile modal: no KYC pill here, so the toggle just sits
   opposite the "About me" heading. */
.lm-tr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.lm-tr-head h4 { margin: 0; }
.lm-tr-head .lm-tr-toggle { margin-right: 0; }

/* ── Dark mode ────────────────────────────────────────────────
   Two different roots are in play here: the profile/messenger
   subsystem sets html[data-lm-theme], the rest of the site uses
   body[data-bs-theme] / body.night-mode. Cover all of them or the
   toggle goes near-invisible on one surface but not the other. */
html[data-lm-theme="dark"] .lm-tr-toggle,
body[data-bs-theme="dark"] .lm-tr-toggle,
body.night-mode .lm-tr-toggle {
  color: var(--lm-text-muted, #9ca3af);
  text-decoration-color: rgba(156, 163, 175, .35);
}

html[data-lm-theme="dark"] .lm-tr-toggle:hover,
html[data-lm-theme="dark"] .lm-tr-toggle:focus-visible,
body[data-bs-theme="dark"] .lm-tr-toggle:hover,
body[data-bs-theme="dark"] .lm-tr-toggle:focus-visible,
body.night-mode .lm-tr-toggle:hover,
body.night-mode .lm-tr-toggle:focus-visible {
  color: #34d399;
  text-decoration-color: currentColor;
}

/* ── Mobile ───────────────────────────────────────────────────
   At 360px the title + toggle + KYC pill will not co-exist on one
   line. Let the row wrap and drop the toggle to its own line
   rather than squeezing the pill. */
@media (max-width: 480px) {
  /* Same specificity reason as the base rule above — a lone class loses. */
  button.lm-tr-toggle { font-size: 10px; }
}