/* Lagos Life text button and link. Owner 5c. Spec: buttons.html#text-button.
   Markup: <button class="ll-text-button ll-interactive">← Back to the city</button>
           <a class="ll-text-button ll-text-button--inline" href="…">Terms</a>
   Lagoon-deep text (4.88:1 on paper). Sits on paper or glass, never on mist (4.47:1). */

.ll-text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--lagoon-deep);
  font: var(--type-body-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}
/* The state layer reaches 4px above and 8px either side, so hover and press read as a soft pill. */
.ll-text-button.ll-interactive::before { inset: calc(var(--space-1) * -1) calc(var(--space-2) * -1); }

/* Inline link inside running text: underlined, wraps with the sentence, no pill. */
.ll-text-button--inline {
  display: inline;
  font: inherit;
  font-weight: var(--weight-semibold);
  white-space: normal;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--space-0-5);
}

.ll-text-button:is([aria-disabled="true"], :disabled) { background-color: transparent; color: var(--ink-inactive); }