/* Settings and the sync pill. */

.settings .set-card { margin-bottom: 1.4rem; }
.settings .set-card h2 {
  font-size: 1.05rem;
  margin: 0 0 .6rem;
  letter-spacing: .01em;
}
.settings p { margin: 0 0 .8rem; }
.settings .warn {
  border-left: 3px solid var(--accent, #9a6b3f);
  padding-left: .75rem;
}
.settings .hint {
  display: block;
  font-size: .85rem;
  opacity: .72;
  margin-top: .3rem;
}
.settings .sync-state { font-weight: 600; }
.settings .field { display: block; margin: 0 0 1rem; }
.settings .field label {
  display: block;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: .35rem;
}
.settings .field input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: .6rem .7rem;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 8px;
  opacity: .92;
}
.settings .actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.settings .actions .btn { min-height: 44px; }

.sync-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 .7rem;
  margin-left: .4rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: .78rem;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  opacity: .62;
  white-space: nowrap;
}
.sync-pill:hover { opacity: 1; }
.sync-pill[data-phase="needs-passphrase"],
.sync-pill[data-phase="error"] { opacity: 1; font-weight: 600; }
.sync-pill[data-phase="offline"] { opacity: .8; }

@media (max-width: 640px) {
  .sync-pill { font-size: .72rem; padding: 0 .55rem; }
}