/*
 * Profile furniture
 *
 * Named for the profile page, which is gokairo.ai's now; the facts list, the
 * note and the panel form are what the source and role pages still use. The
 * form furniture (.field, .button, .flash) is the design system's
 * (kairo/controls.css) on the same tokens, so only the spacing inside a panel
 * is restated here.
 */

.page-content--narrow {
  max-width: 1080px;
}

.profile-facts {
  margin: 0;
  padding: 6px 20px 4px;
}

.profile-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--k-color-line);
}

.profile-facts > div:last-child {
  border-bottom: 0;
}

.profile-facts dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--k-color-muted);
}

.profile-facts dd {
  margin: 0;
  font-size: 14px;
  text-align: end;
  color: var(--k-color-ink);
}

.profile-note {
  margin: 4px 20px 18px;
  padding: 13px 15px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--k-color-muted);
  background: var(--k-color-lavender-soft);
  border-radius: var(--k-radius-control);
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.profile-form .field__hint {
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--k-color-muted);
}

/* The one button that commits a change sits on the left axis of the form it
   commits, at its own width — stretched across the panel it would read as
   the panel's footer rather than the form's action. */
.profile-form .button {
  align-self: start;
}

/* The paste-a-token form under the Instagram login button. Folded away
   because it is the path for an operator, not the merchant: shown open, two
   ways to do one thing reads as a choice the merchant has to make. */
.fallback {
  margin: 0 20px 4px;
  border-top: 1px solid var(--k-color-line);
}

.fallback > summary {
  min-height: 44px;
  display: list-item;
  align-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--k-color-muted);
  cursor: pointer;
}

.fallback > summary:hover {
  color: var(--k-color-ink);
}

.fallback > .profile-form {
  padding: 4px 0 20px;
}

.page-content .flash {
  margin: 0 0 14px;
  font-size: 13px;
}

/* The quiet button inside a panel form, restated at the specificity the
   panel's own button rules reach, so a Cancel beside the violet submit stays
   paper with a visible border. */
.profile-form .button--quiet {
  color: var(--k-color-ink);
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-control-border);
}

.profile-form .button--quiet:hover {
  color: var(--k-color-ink);
  background: var(--k-color-lavender-soft);
  border-color: var(--k-color-control-border);
}