/* Settings layout composes the UI kit's fields, selects, buttons and surfaces. */
#settings-dialog {
  width: min(1080px, calc(100vw - 48px));
  max-width: none;
  height: calc(100dvh - 64px);
  max-height: none;
  padding: 0;
  overflow: hidden;
  background: var(--color-settings-sidebar);
}
.settings-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); height: 100%; }
.settings-sidebar { display: flex; flex-direction: column; padding: 24px 12px; overflow-y: auto; background: var(--color-settings-sidebar); }
.settings-sidebar > * { flex-shrink: 0; }
.settings-sidebar-footer { margin-top: auto; padding-top: 24px; }
.settings-sign-out { width: 100%; justify-content: flex-start; }
.settings-sign-out-error { margin: 8px 12px 0; }
.settings-title { font-size: var(--text-body-lg); padding: 0 12px; margin: 0 0 24px; }
.settings-main { margin: calc(2 * var(--spacing)) calc(2 * var(--spacing)) calc(2 * var(--spacing)) 0; padding: 48px 48px 32px; }
.settings-pages { width: 100%; min-width: 0; }
.settings-page-header { margin-bottom: 32px; }
.settings-page-header h2 { margin: 0; }
.settings-page-header h2:focus { outline: none; }
.settings-close { position: absolute; right: 16px; top: 16px; }
.settings-back { display: none; }
.settings-page-body > .modal-header { display: none; }
.settings-page .settings-form { display: grid; gap: 24px; margin-top: 0; }
.settings-page .settings-form > [data-profile-save] { justify-self: start; }
.settings-page .settings-actions { justify-content: flex-start; margin-top: 0; }
.settings-page .settings-actions [data-password-close], .settings-page .settings-actions [data-workspace-close] { display: none; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.settings-row-label { min-width: 0; }
.settings-row-label p { margin: 4px 0 0; }
.settings-row-control { display: flex; justify-content: flex-end; flex-shrink: 0; min-width: 120px; }
.settings-page .ai-connections-body { margin-top: 0; }
.settings-page .access-admin-section { margin-top: 24px; }
.settings-page .access-admin-section:first-of-type { margin-top: 0; }
.menu-divider { width: 100%; border: 0; border-top: 1px solid var(--color-line-1); margin: 4px 0; }
@media (max-width: 800px) {
  .settings-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .settings-main { padding: 48px 24px 24px; }
}
@media (max-width: 640px) {
  #settings-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .settings-layout { display: block; padding: calc(2 * var(--spacing)); }
  .settings-sidebar { display: none; height: 100%; border: 0; padding-top: 24px; }
  .settings-main { height: 100%; margin: 0; padding: 16px 20px 32px; }
  .settings-back { display: inline-flex; margin: 0 40px 28px -8px; }
  .settings-page-header { margin-bottom: 28px; }
  #settings-dialog[data-mobile-list="true"] .settings-sidebar { display: flex; }
  #settings-dialog[data-mobile-list="true"] .settings-main { display: none; }
  .settings-row { gap: 16px; align-items: flex-start; }
  .settings-row-control { min-width: 96px; }
}

/* Shared composition; themes independently define grouping and control tones. */
.settings-main {
  background: var(--color-settings-content);
  box-shadow: var(--shadow-content);
  --color-surface-2: var(--color-settings-control);
  --color-chip: var(--color-settings-control);
  --color-chip-hover: var(--color-settings-control-hover);
  --color-control-hover: var(--color-settings-control-hover);
  --color-surface-3: var(--color-settings-control-hover);
}
.settings-page :is(.access-admin-group,.access-activity,.ai-connection-card,.ai-setup-box,.state-panel) {
  border: 0;
  background: var(--color-settings-group);
}
.settings-page .access-admin-group:has(> .access-member) {
  display: grid;
  gap: 0;
  overflow: hidden;
}
.settings-page .access-member {
  background: var(--color-settings-group);
  border: 0;
  border-radius: 0;
}
.settings-page :is(.ai-setting-row,.ai-grant + .ai-grant) { border: 0; }
.settings-page .ai-setting-row + .ai-setting-row { margin-top: var(--spacing); }
.settings-page .team-member + .team-member { border: 0; }
.settings-page .team-member:hover { background: var(--color-settings-control); }

.settings-page .settings-form { width:100%; min-width:0; }
.settings-page .settings-form > [data-profile-save], .settings-page .settings-actions { justify-self:start; min-width:120px; }
.settings-page [data-profile-retry] { justify-self:start; }

[data-loading="true"] .profile-names .field { position:relative; }
[data-loading="true"] .profile-names .field::after { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--color-settings-control); }
[data-loading="true"] .profile-photo { border-radius:50%; background:var(--color-settings-control); }
[data-loading="true"] .profile-photo > * { visibility:hidden; }

[data-ai-status][data-loading="true"]::after { content:""; display:block; width:70%; height:24px; margin-top:12px; background:var(--color-settings-control); border-radius:var(--radius-sm); }

.workspace-attributes-list { margin-top:calc(4 * var(--spacing)); display:grid; gap:calc(3 * var(--spacing)); padding:calc(4 * var(--spacing)); border-radius:var(--radius-sm); background:var(--color-settings-group); }
.workspace-attribute-row, .workspace-attribute-head { display:grid; grid-template-columns:calc(8 * var(--spacing)) minmax(0,1fr) calc(12 * var(--spacing)) calc(7 * var(--spacing)); align-items:center; gap:calc(3 * var(--spacing)); }
.workspace-attribute-row .field { min-width:0; }
.workspace-attribute-row input { width:100%; min-width:0; }
.attribute-usage { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.workspace-attributes-list > [role="list"] { display:grid; gap:calc(3 * var(--spacing)); }
.workspace-attribute-head > :first-child { grid-column:1 / 3; }
.workspace-attribute-head > :last-child { text-align:right; }
.workspace-attribute-head[hidden] { display:none; }
.attribute-row-feedback { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:calc(2 * var(--spacing)); }
.attribute-row-feedback p { flex:1 1 100%; margin:0; }
.attribute-row-feedback[hidden] { display:none; }
.attribute-icon-picker { width:min(calc(80 * var(--spacing)),calc(100vw - 4 * var(--spacing))); padding:calc(3 * var(--spacing)); overflow:hidden; }
.attribute-icon-picker .search-field { width:100%; margin-bottom:calc(3 * var(--spacing)); }
.attribute-icon-results { overflow-y:auto; max-height:min(calc(72 * var(--spacing)),calc(100dvh - 40 * var(--spacing))); overscroll-behavior:contain; }
.attribute-icon-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:calc(var(--spacing)); }
.attribute-icon-grid .icon-button { justify-self:center; }
.attribute-icon-grid .icon-button[aria-pressed="true"] { background:var(--color-control-hover); }
@media(max-width:640px) { .workspace-attributes-list { padding:calc(3 * var(--spacing)); } .workspace-attribute-row, .workspace-attribute-head { gap:calc(2 * var(--spacing)); } .attribute-usage { min-width:0; } }

/* Wrapped member actions keep the same trailing alignment as desktop rows. */
@media (max-width: 600px) {
  .settings-page .access-member > .access-member-identity + .button,
  .settings-page .access-member > .access-member-identity + .text-small { margin-left: auto; }
}

.settings-page .attribute-create { margin-top:16px; padding:16px; border-radius:var(--radius-sm); background:var(--color-settings-group); }
.attribute-create-fields { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:end; gap:12px; }
.attribute-create-fields > .icon-button { margin-bottom:0; }
.attribute-create-fields .access-field { min-width:0; }
.settings-page .attribute-create[hidden] { display:none; }

.settings-page [data-add-attribute] { margin-top:16px; }