/* Auth (setup / sign-in) */

.auth-panel {
  width: min(360px, 90vw);
  text-align: left;
}

.auth-panel h1 {
  margin: 0 0 var(--space-1);
}

/* Settings — pane chrome clears the workspace rule; panels keep elevated shell. */

.settings-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.settings-view > .pane-chrome:first-child {
  position: sticky;
  top: 0;
  z-index: 2;
}

.settings-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-3) var(--list-pad-x) var(--space-5);
}

.settings-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}

.settings-lede {
  margin: 0;
}

/* Hug confirm-field min (10ch + prefix + actions) — don't clip the shell. */
.settings-field--short {
  width: fit-content;
  max-width: 100%;
}

/* Compact chrome tint: one result + three axes with adaptive edge samples. */
.settings-chrome {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--measure);
}

.settings-chrome__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-chrome__result {
  width: var(--control-h);
  height: var(--control-h);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-sizing: border-box;
}

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

.settings-chrome__axis {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.settings-chrome__axis-label {
  color: var(--text);
  font-weight: 500;
}

.settings-chrome__track {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.settings-chrome__track .ui-slider {
  flex: 1;
  width: auto;
  min-width: 0;
}

.settings-chrome__edge {
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.settings-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Account view — pane chrome + elevated form surface (see recipes «Form surface»). */

.account-view {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  /* Keep overflow on the section body — auto here prevents flex children from
     filling the pane, so margin-top:auto on the delete row never engages. */
  overflow: hidden;
}

/* Profile / Invites / Requests — fill space under the Account chrome. */
.account-view > *:not(.pane-chrome) {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}

/* Align with Filters / Inspector chrome; shared workspace rule sits under this. */
.account-view > .pane-chrome:first-child {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Profile / invites / requests — elevated panels (same form surface as Brand info). */
.account-profile,
.account-rail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3) var(--list-pad-x) var(--space-5);
}

.account-profile > .panel:not(.account-profile-danger) {
  flex-shrink: 0;
}

.account-profile-danger {
  margin-top: auto;
  flex-shrink: 0;
}

.account-fields {
  padding: var(--space-3);
}

/* Tile grids already pad internally — keep the elevated shell flush. */
.panel:has(> .entity-tiles) {
  padding: 0;
  overflow: hidden;
}

.account-email {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-weight: 500;
}

.account-email-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-email .badge {
  flex-shrink: 0;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Static entity rows (account / members) — see .entity-row--static */
.user-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

/* Only legacy stacks outside EntityList drop the last rule — inside a list,
   every row sits alone in `.entity-row__block`, so `:last-child` would erase
   all separators. */
.user-list > .user-row:last-child,
.user-list > .entity-row--static:last-child,
.user-list > .entity-row__block:last-child > .entity-row--static {
  border-bottom: none;
}

.user-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  overflow: hidden;
}

.user-email {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-email-secondary {
  font-size: 0.875em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}