/* Account menu and settings view.

   Owned by the account workstream. Every colour comes from the custom
   properties defined in app.css, so light and dark mode both follow the
   shared palette and nothing here needs a second definition. */

/* ------------------------------------------------------------------ */
/* account menu                                                        */
/* ------------------------------------------------------------------ */

.account-mount {
  display: flex;
  align-items: center;
}

.account {
  position: relative;
  display: flex;
  align-items: center;
}

.account-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  cursor: pointer;
  padding: 3px 7px 3px 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
  max-width: 230px;
}

.account-trigger:hover {
  background: var(--surface-2);
  border-color: var(--line);
}

.account-trigger:focus-visible,
.account.open .account-trigger {
  outline: none;
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.account-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

.account-trigger .user-meta {
  min-width: 0;
}

.account-trigger .user-meta strong,
.account-trigger .user-meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

.account-caret {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--muted);
  transition: transform .12s ease;
}

.account.open .account-caret {
  transform: rotate(180deg);
}

.account-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 50;
  min-width: 236px;
  max-width: min(300px, calc(100vw - 24px));
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  padding: 4px;
  display: grid;
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.account-menu-head {
  display: grid;
  gap: 2px;
  padding: 9px 10px 10px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--line);
}

.account-menu-head strong {
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.account-menu-head small {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.account-menu-identity {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  min-width: 0;
}

.account-menu-org {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 5px;
  padding: 8px 10px;
  cursor: pointer;
}

.account-menu-item:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.account-menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.account-menu-item:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.account-menu-danger {
  color: var(--danger);
}

.account-menu-danger:hover,
.account-menu-danger:focus-visible {
  background: var(--danger-soft);
  color: var(--danger);
}

.account-menu-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 2px;
}

/* ------------------------------------------------------------------ */
/* settings view                                                       */
/* ------------------------------------------------------------------ */

#view-settings .page-head,
#view-settings .block,
#view-settings .note {
  max-width: 760px;
}

#view-settings .block-head {
  margin-bottom: 16px;
}

#view-settings h2:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.settings-form {
  display: block;
  margin: 0;
}

#view-settings .field {
  max-width: 380px;
}

#view-settings .field input {
  width: 100%;
}

#view-settings input[readonly] {
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: default;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}

.settings-actions .btn:focus-visible,
#view-settings .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* An anchor styled as a button still has to look and sit like one. */
#view-settings a.btn {
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
}

#view-settings a.btn:hover {
  border-color: var(--muted);
}

.settings-subhead {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.settings-facts {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.settings-facts > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  align-items: center;
}

.settings-facts dt {
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
}

.settings-facts dd {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.settings-notice {
  font-size: 12px;
  line-height: 1.5;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 14px;
}

.settings-verify {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.settings-verify strong {
  font-size: 13px;
  font-weight: 600;
}

.settings-verify .pill {
  justify-self: end;
}

.settings-verify p {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.5;
}

.settings-table-scroll {
  overflow-x: auto;
}

.settings-members {
  min-width: 420px;
}

.settings-members td {
  overflow-wrap: anywhere;
}

.settings-connections {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.settings-connection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  text-decoration: none;
  color: var(--ink);
}

.settings-connection:hover {
  border-color: var(--accent);
}

.settings-connection:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.settings-connection-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-connection-main strong {
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.settings-connection-main small {
  font-size: 11px;
}

.settings-connection-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  flex: none;
}

/* ------------------------------------------------------------------ */
/* small screens                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 720px) {
  /* The top bar is tight on a phone: keep the avatar as the trigger and let
     the menu header carry the name, email and workspace. */
  .account-trigger .user-meta {
    display: none;
  }

  .account-trigger {
    padding: 3px 6px 3px 4px;
  }

  .account-menu {
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 20px);
  }

  #view-settings .field,
  #view-settings .field input {
    max-width: none;
  }

  .settings-facts > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .settings-connection {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-connection-pills {
    justify-content: flex-start;
  }
}

/* Colour-scheme chooser in Settings. A plain radio group rather than a segmented
   control, because the three options need a sentence of explanation each. */
#view-settings .field:has(.settings-choices) { max-width: 460px; }
.settings-choices {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.settings-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.settings-choice:hover { border-color: var(--accent); }
.settings-choice:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* #view-settings .field input sets width:100% for text inputs, which stretches
   a radio across the row and centres its dot. Matching that rule's specificity
   is the only way to opt these out. */
#view-settings .settings-choice input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  margin: 3px 0 0;
}
.settings-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-choice-text strong { font-size: 14px; }
.settings-choice-text .muted { font-size: 12px; }