/* =========================================================
   TOE BEANS DESIGN SYSTEM
   ACCOUNT MENU
   ========================================================= */

.ds-account-demo {

  position:
    relative;

  display:
    inline-block;

}


.ds-account-button {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    6px 9px;

  border:
    1px solid
    var(--ds-border);

  border-radius:
    var(--ds-radius-pill);

  background:
    var(--ds-surface);

  color:
    var(--ds-heading);

}


.ds-avatar {

  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-radius:
    50%;

  background:
    var(--ds-secondary);

  color:
    var(--ds-primary-dark);

  font-size:
    12px;

  font-weight:
    850;

}

.ds-avatar-photo {

  grid-area:
    1 / 1;

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  object-fit:
    cover;

  display:
    block;

}

.ds-avatar-photo[hidden] {

  display:
    none;

}


.ds-account-dropdown {

  width:
    280px;

  margin-top:
    10px;

  overflow:
    hidden;

  border:
    1px solid
    var(--ds-border);

  border-radius:
    var(--ds-radius-lg);

  background:
    var(--ds-surface);

  box-shadow:
    var(--ds-shadow-md);

}


.ds-account-header {

  display:
    grid;

  gap:
    3px;

  padding:
    16px;

}


.ds-account-header span {

  color:
    var(--ds-muted);

  font-size:
    12px;

}


.ds-account-divider {

  height:
    1px;

  background:
    var(--ds-border);

}


.ds-account-item {

  width:
    100%;

  display:
    flex;

  gap:
    10px;

  align-items:
    center;

  padding:
    12px 16px;

  border:
    0;

  background:
    transparent;

  color:
    var(--ds-text);

  text-align:
    left;

  font-weight:
    700;

}


.ds-account-item:hover {

  background:
    var(--ds-surface-alt);

}

/* =========================================================
   ACCOUNT SETTINGS
   ========================================================= */

.user-settings-dialog {
  width: min(720px, calc(100vw - 32px));
}

.user-settings-header {
  gap: var(--ds-space-5);
  padding: var(--ds-space-5) var(--ds-space-6);
  border-bottom: 1px solid var(--ds-border);
}

.user-settings-header > div {
  display: grid;
  gap: var(--ds-space-1);
}

.user-settings-header .section-kicker {
  margin: 0;
  color: var(--ds-primary-accent);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.user-settings-header h2 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 1.65rem;
  line-height: 1.15;
}

.user-settings-intro {
  max-width: 52ch;
  margin: var(--ds-space-1) 0 0;
  color: var(--ds-muted);
  line-height: 1.5;
}

.user-settings-body {
  display: grid;
  gap: var(--ds-space-3);
  padding: var(--ds-space-5) var(--ds-space-6);
}

.user-settings-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-space-4);
  min-width: 0;
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
}

.user-settings-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--ds-primary-soft);
  color: var(--ds-primary-accent);
}

.user-settings-icon .ds-icon {
  width: 22px;
  height: 22px;
}

.user-settings-mode-icon-sun {
  display: none;
}

html[data-mode="dark"] .user-settings-mode-icon-moon {
  display: none;
}

html[data-mode="dark"] .user-settings-mode-icon-sun {
  display: block;
}

.user-settings-copy {
  min-width: 0;
}

.user-settings-copy h3 {
  margin: 0 0 var(--ds-space-1);
  color: var(--ds-heading);
  font-size: 1rem;
  line-height: 1.3;
}

.user-settings-copy p {
  max-width: 48ch;
  margin: 0;
  color: var(--ds-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.user-settings-action {
  min-width: 150px;
  justify-content: center;
  white-space: nowrap;
}

.user-settings-row-danger {
  border-color: var(--ds-danger);
  background: var(--ds-surface);
}

.user-settings-icon-danger {
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.user-settings-footer {
  justify-content: center;
  align-items: center;
  padding: var(--ds-space-4) var(--ds-space-6);
}

.user-settings-footer p {
  margin: 0;
}



/* =========================================================
   USER TOOLS
   ========================================================= */

.user-tools-dialog {
  width: min(720px, calc(100vw - 32px));
}

.user-tools-header {
  gap: var(--ds-space-5);
  padding: var(--ds-space-5) var(--ds-space-6);
  border-bottom: 1px solid var(--ds-border);
}

.user-tools-header > div {
  display: grid;
  gap: var(--ds-space-1);
}

.user-tools-header .section-kicker {
  margin: 0;
  color: var(--ds-primary-accent);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.user-tools-header h2 {
  margin: 0;
  color: var(--ds-heading);
  font-size: 1.65rem;
  line-height: 1.15;
}

.user-tools-intro {
  max-width: 54ch;
  margin: var(--ds-space-1) 0 0;
  color: var(--ds-muted);
  line-height: 1.5;
}

.user-tools-body {
  display: grid;
  gap: var(--ds-space-3);
  padding: var(--ds-space-5) var(--ds-space-6);
}

.user-tools-section {
  display: grid;
  gap: var(--ds-space-4);
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
}

.user-tools-section-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-space-4);
}

.user-tools-section-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ds-primary-soft);
  color: var(--ds-primary-accent);
}

.user-tools-section-icon .ds-icon {
  width: 22px;
  height: 22px;
}

.user-tools-section-copy {
  min-width: 0;
}

.user-tools-section-copy h3 {
  margin: 0 0 var(--ds-space-1);
  color: var(--ds-heading);
  font-size: 1rem;
  line-height: 1.3;
}

.user-tools-section-copy p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.user-tools-count {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--ds-space-2);
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface-soft);
  color: var(--ds-heading);
  font-size: 0.82rem;
  font-weight: 800;
}

.user-tools-status {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-soft);
  color: var(--ds-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.user-tools-section-actions {
  display: flex;
  justify-content: flex-end;
}

.user-tools-list {
  display: grid;
  gap: var(--ds-space-3);
}

.user-tools-list:empty {
  display: none;
}

.user-tools-list > article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-soft);
}

.user-tools-list > article strong {
  color: var(--ds-heading);
}

.user-tools-list > article p {
  margin: var(--ds-space-1) 0 0;
  color: var(--ds-muted);
  line-height: 1.45;
}

.user-tools-list > article small {
  display: block;
  margin-top: var(--ds-space-2);
  color: var(--ds-muted);
}

.user-tools-list > article > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ds-space-2);
}

.user-tools-footer {
  align-items: center;
  justify-content: flex-end;
  padding: var(--ds-space-4) var(--ds-space-6);
}