/* Account settings: settings sections, boundaries, and sessions. */
@layer components {
  .settings-layout {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
    align-items: start;
    gap: var(--space-7);
    min-width: 0;
  }

  .settings-nav {
    position: sticky;
    top: var(--space-4);
  }

  .settings-nav__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    border-top: var(--border-thin) solid var(--color-border-strong);
    list-style: none;
  }

  .settings-nav__list a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-thin) solid var(--color-border);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-decoration: none;
  }

  .settings-nav__list a:hover,
  .settings-nav__list a:focus-visible {
    color: var(--color-accent);
  }

  .settings-sections {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    min-width: 0;
  }

  .settings-section {
    min-width: 0;
    padding: var(--space-5);
    border: var(--border-thin) solid var(--color-border);
    background: var(--color-surface);
    scroll-margin-top: var(--space-4);
  }

  .settings-section__header {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-thin) solid var(--color-border-strong);
  }

  .settings-section__header h2,
  .boundary-section__header h2 {
    margin: 0;
    font-size: var(--text-section-title);
    letter-spacing: -0.035em;
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
  }

  .settings-section__header p,
  .boundary-section__header p {
    max-width: 60ch;
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    line-height: 1.55;
  }

  .settings-section__form {
    max-width: 36rem;
  }

  .settings-section__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .settings-section__footer-link {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: var(--border-thin) solid var(--color-border);
    font-weight: 700;
  }

  .settings-account__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
  }

  .settings-account__facts > div {
    min-width: 0;
    padding: var(--space-4);
    border: var(--border-thin) solid var(--color-border);
  }

  .settings-account__facts dt {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .settings-account__facts dd {
    margin: var(--space-2) 0 0;
    font-family: var(--font-reading);
    font-size: var(--text-lg);
    overflow-wrap: anywhere;
  }

  .settings-account__facts dd form {
    margin-top: var(--space-3);
  }

  .settings-subsection {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-thin) solid var(--color-border);
  }

  .settings-subsection > h3,
  .settings-tool > h3,
  .danger-zone > h3 {
    margin: 0;
    font-family: var(--font-reading);
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
  }

  .settings-subsection > .form-stack,
  .settings-subsection > p:first-of-type {
    margin-top: var(--space-4);
  }

  .settings-change-email__pending {
    overflow-wrap: anywhere;
  }

  .settings-account__tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .settings-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
    border: var(--border-thin) solid var(--color-border);
  }

  .settings-tool > p,
  .settings-tool > form {
    margin: 0;
  }

  .settings-tool > p {
    line-height: 1.5;
  }

  .settings-tool > form,
  .settings-tool .btn {
    min-width: 0;
    max-width: 100%;
  }

  .settings-tool .btn {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .settings-section > .danger-zone {
    width: 100%;
    margin-top: var(--space-6);
  }

  .boundaries {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    width: min(100%, var(--width-reading));
    margin-inline: auto;
  }

  .boundary-section {
    min-width: 0;
    padding-top: var(--space-5);
    border-top: 3px solid var(--color-border-strong);
  }

  .boundary-section--blocked {
    border-top-color: var(--color-danger);
  }

  .boundary-section__header {
    margin-bottom: var(--space-4);
  }

  .boundary-list {
    margin: 0;
    padding: 0;
    border-top: var(--border-thin) solid var(--color-border);
    list-style: none;
  }

  .boundary-list__row {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-4) 0;
    border-bottom: var(--border-thin) solid var(--color-border);
  }

  .boundary-list__userpic {
    overflow: hidden;
    border-radius: 50%;
    line-height: 0;
  }

  .boundary-list__identity {
    display: grid;
    justify-items: start;
    gap: var(--space-1);
    min-width: 0;
  }

  body:not(.error-layout) .boundary-list__name {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 1.5rem;
    color: var(--color-text);
    font-family: var(--font-reading);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
    text-decoration: none;
  }

  body:not(.error-layout) .boundary-list__name:hover {
    color: var(--color-accent);
  }

  .boundary-list__handle {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
  }

  .boundary-list__action,
  .boundary-list__action form {
    min-width: 0;
    margin: 0;
  }

  .boundary-list__action .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .settings-boundaries__empty {
    width: 100%;
  }

  .sessions-page__description {
    width: min(100%, var(--width-reading));
    margin: 0 auto var(--space-5);
    color: var(--color-text-muted);
    font-family: var(--font-reading);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
  }

  .session-list {
    display: grid;
    width: min(100%, var(--width-reading));
    margin: 0 auto;
    padding: 0;
    border-top: var(--border-thin) solid var(--color-border-strong);
    list-style: none;
  }

  .session-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-5) var(--space-4);
    border-bottom: var(--border-thin) solid var(--color-border);
    background: var(--color-surface);
  }

  .session-card--current {
    border-left: 3px solid var(--color-success);
  }

  .session-card__details,
  .session-card__heading {
    min-width: 0;
  }

  .session-card__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
  }

  .session-card__device {
    font-family: var(--font-reading);
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
  }

  .session-card__current {
    color: var(--color-success);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .session-card__activity {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: var(--space-2) 0 0;
    overflow-wrap: anywhere;
  }

  .session-card__signed-in {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
  }

  .session-card__action,
  .session-card__action form {
    min-width: 0;
    margin: 0;
  }

  .session-card__action .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  @media (max-width: 820px) {
    .settings-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-5);
    }

    .settings-nav {
      position: static;
    }

    .settings-nav__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border: var(--border-thin) solid var(--color-border-strong);
    }

    .settings-nav__list a {
      height: 100%;
      border-right: var(--border-thin) solid var(--color-border);
      border-bottom: 0;
    }

    .settings-nav__list li:nth-child(3n) a {
      border-right: 0;
    }
  }

  @media (max-width: 520px) {
    .settings-nav__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-nav__list a {
      border-bottom: var(--border-thin) solid var(--color-border);
    }

    .settings-nav__list li:nth-child(3n) a {
      border-right: var(--border-thin) solid var(--color-border);
    }

    .settings-nav__list li:nth-child(even) a {
      border-right: 0;
    }

    .settings-nav__list li:nth-last-child(-n + 2) a {
      border-bottom: 0;
    }

    .session-card {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }

    .session-card__action {
      justify-self: start;
    }
  }

  @media (max-width: 720px) {
    .settings-account__facts,
    .settings-account__tools {
      grid-template-columns: minmax(0, 1fr);
    }

    .boundary-list__row {
      grid-template-columns: 4rem minmax(0, 1fr);
      align-items: start;
    }

    .boundary-list__action {
      grid-column: 2;
      justify-self: start;
    }
  }

  @media (max-width: 350px) {
    .settings-section,
    .settings-tool {
      padding: var(--space-3);
    }

    .boundary-list__row {
      grid-template-columns: 3.25rem minmax(0, 1fr);
      gap: var(--space-3);
    }

    .boundary-list__userpic,
    .boundary-list__userpic .userpic-image,
    .boundary-list__userpic .userpic-placeholder {
      width: 3.25rem;
      height: 3.25rem;
    }
  }
}