.settings-layout {
  --settings-layout-width: 42rem;
  --settings-layout-padding: var(--block-space);

  display: flex;
  flex-direction: column;
  gap: var(--block-space);
  inline-size: min(var(--settings-layout-width), 100vw);
  margin: calc(var(--navbar-height) - var(--block-space)) auto var(--block-space);
  max-inline-size: 100vw;
  padding: var(--settings-layout-padding);
}

.settings-layout--wide {
  --settings-layout-width: 56rem;
}

.settings-layout__header,
.settings-layout__content {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
}

.settings-layout__title-row {
  align-items: start;
  display: grid;
  gap: var(--inline-space);
  grid-template-columns: minmax(0, 1fr);
}

.settings-layout__title-row:has(.settings-layout__actions) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.settings-layout__title-row:has(.settings-layout__icon) {
  grid-template-columns: auto minmax(0, 1fr);
}

.settings-layout__title-row:has(.settings-layout__icon):has(.settings-layout__actions) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.settings-layout__icon {
  align-items: center;
  background: var(--color-border);
  border: 1px solid var(--color-border-darker);
  border-radius: 0.5rem;
  display: inline-flex;
  inline-size: 2.5rem;
  justify-content: center;
  min-block-size: 2.5rem;
}

.settings-layout__icon img {
  filter: var(--btn-icon-filter, invert(100%));
}

.settings-layout__title-copy {
  min-inline-size: 0;
}

.settings-layout__title {
  font-size: var(--txt-x-large);
  line-height: 1.15;
  margin: 0;
}

.settings-layout__description {
  color: var(--color-border-darker);
  font-size: var(--txt-small);
  margin: 0.35rem 0 0;
}

.settings-layout__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space);
  justify-content: end;
}

.settings-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-sizing: border-box;
  box-shadow:
    0 0 0 1px oklch(var(--lch-always-black) / 0.06),
    0 .5em 1.4em -1em oklch(var(--lch-always-black) / 0.45);
  inline-size: 100%;
  min-inline-size: 0;
  padding: calc(var(--block-space) * 1.25);
}

.settings-card .input--actor {
  --input-background: var(--color-message-bg);
  --input-border-color: var(--color-border);
  --input-border-radius: 0.5rem;
  --input-padding: 0.65em 0.9em;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
}

.settings-section + .settings-section {
  margin-block-start: var(--block-space);
}

.settings-section__header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.settings-section__header h2,
.settings-section__header p {
  margin: 0;
}

.settings-section__header h2 {
  font-size: var(--txt-large);
  line-height: 1.1;
}

.settings-section__header p {
  color: var(--color-border-darker);
  font-size: var(--txt-small);
}

.settings-card--flush {
  padding: 0;
}

.settings-card__link {
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--block-space-half);
  text-decoration: none;
}

.settings-card__link:is(:hover, :focus-visible) {
  border-color: var(--color-border-darker);
}

.settings-card--disclosure {
  padding-block: 0;
}

.settings-card__summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--inline-space);
  list-style: none;
  padding-block: calc(var(--block-space) * 1.25);
}

.settings-card__summary::marker,
.settings-card__summary::-webkit-details-marker {
  display: none;
}

.settings-card__summary-icon {
  transition: transform 150ms ease;
}

.settings-card--disclosure[open] .settings-card__summary-icon {
  transform: rotate(90deg);
}

.settings-card__disclosure-content {
  border-block-start: 1px solid var(--color-border);
  padding-block: var(--block-space) calc(var(--block-space) * 1.25);
}

.settings-inline-panel,
.settings-inline-form {
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--block-space);
  padding-block-start: var(--block-space);
}

.settings-inline-panel {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
}

.settings-inline-panel .settings-inline-form {
  border-block-start: 0;
  margin-block: 0;
  padding-block-start: 0;
}

.settings-card__header {
  align-items: center;
  display: flex;
  gap: var(--inline-space);
  justify-content: space-between;
  margin-block-end: var(--block-space);
}

.settings-danger-zone {
  display: grid;
  gap: var(--block-space);
  grid-template-columns: 1fr;
}

.account-invite {
  align-items: stretch;
  text-align: start;
}

.account-invite__field {
  --row-gap: 0.65em;
}

.account-invite .invite-label {
  display: block;
  font-size: var(--txt-large);
  line-height: 1.15;
}

.account-invite__control {
  --input-border-color: var(--color-border-darker);
  --input-border-radius: 0.65rem;
  --input-padding: 0.85rem 1rem;

  box-sizing: border-box;
  inline-size: 100%;
}

.account-invite__control img {
  inline-size: 1.65em;
}

.account-invite__url {
  font-size: var(--txt-large);
  font-weight: 700;
  min-inline-size: 0;
}

.account-invite__actions {
  flex-wrap: wrap;
  justify-content: center;
}

.account-invite__actions .btn {
  --btn-border-radius: 0.65rem;
  --btn-padding: 0.65em 0.85em;

  font-size: var(--txt-small);
}

.transfer-login {
  display: block;
  max-inline-size: none;
}

.transfer-login__legend {
  align-items: center;
  display: flex;
  margin-inline: auto;
  padding-inline: var(--inline-space);
}

.transfer-login__content,
.transfer-login__form,
.transfer-login__code {
  inline-size: 100%;
}

.transfer-login__header {
  text-align: center;
}

.transfer-login__title {
  display: block;
  font-size: var(--txt-large);
  font-weight: 700;
  line-height: 1.2;
}

.transfer-login__description {
  color: var(--color-border-darker);
  font-size: var(--txt-small);
  margin: var(--block-space-half) auto 0;
  max-inline-size: 42rem;
}

.transfer-login__code {
  box-sizing: border-box;
  text-align: center;
}

.transfer-login__actions {
  flex-wrap: wrap;
}

.transfer-login__generate-btn {
  --btn-padding: 0.7em 1em;

  font-size: var(--txt-large);
  min-block-size: 3rem;
}

@media (max-width: 42rem) {
  .settings-layout__title-row,
  .settings-layout__title-row:has(.settings-layout__actions) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .settings-layout__actions {
    grid-column: 1 / -1;
    justify-content: start;
  }
}

@media (min-width: 67.5rem) {
  .settings-layout {
    --settings-layout-padding: var(--block-space-double);

    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow:
      0 0 0 1px oklch(var(--lch-always-black) / 0.02),
      0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
      0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
      0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5);
  }

  .settings-danger-zone {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}