/* --- Settings, layout "Option B" (ATLAS-3401) -------------------------------------------------
   Pill tabs under the header, the business card on the left, one tab's controls on the right.
   At phone width the card stacks above the form and the pills scroll sideways. */

.settings-b {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  /* The room shares the screen with David's panel, so it lays out by its own width. */
  container-type: inline-size;
}

.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--space-1);
}
.settings-tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--type-body);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .settings-tab {
    transition: none;
  }
}
.settings-tab:hover {
  color: var(--text);
}
.settings-tab.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--ink);
}
.settings-tab:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
/* Advanced sits apart, on the right, with a dashed outline: it is the agency Owner's. */
.settings-tab-advanced {
  margin-left: auto;
  border-style: dashed;
}
.settings-tab-advanced.active {
  border-style: solid;
}

.settings-b-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.settings-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  position: sticky;
  top: var(--space-4);
}
.settings-card-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.settings-card-head p {
  margin: var(--space-1) 0 0;
  font-size: var(--type-body);
}
.settings-card-logo .profile-head-icon {
  width: 56px;
  height: 56px;
}
.settings-card-name {
  margin: 0;
  font-size: var(--type-xl);
  overflow-wrap: anywhere;
}
.settings-card-rows {
  display: grid;
  margin: 0;
}
.settings-card-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
  font-size: var(--type-body);
}
.settings-card-row dt {
  color: var(--muted);
}
.settings-card-row dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.settings-card-value.tone-muted {
  color: var(--muted);
  font-weight: 500;
}
.settings-card-value.tone-warn {
  color: var(--gold);
}
.settings-card-value.tone-good {
  color: rgb(var(--c-3ddc97));
}
.settings-card-change {
  justify-self: start;
}

.settings-panes,
.settings-pane {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.settings-pane {
  container-type: inline-size;
}
/* Panels that draw themselves bare get the same card as the rest of the room. */
.settings-pane > [data-business-identity],
.settings-pane > [data-lead-ownership],
.settings-pane > [data-business-crm],
.settings-pane > [data-jobtread-settings],
.settings-pane > [data-calendar-settings],
.settings-pane > [data-deposit-settings],
.settings-pane > [data-voice-calls],
.settings-pane > [data-settings-appearance],
.settings-pane > [data-settings-technical-details],
.settings-pane > .business-team {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  min-width: 0;
}
.settings-pane > :is(.room-card, section, div) {
  margin: 0;
}
.settings-pane > :empty {
  display: none;
}
.settings-pane :is([data-business-identity], [data-lead-ownership]) > h2:first-child,
.settings-pane [data-business-crm] > h3:first-child,
.settings-pane [data-jobtread-settings] > h3:first-child {
  margin-top: 0;
}
.settings-pane [data-business-identity] > form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.settings-pane [data-business-identity] > form > button {
  grid-column: 1 / -1;
  justify-self: end;
}
.settings-pane[hidden] {
  display: none;
}
.settings-pane-title {
  margin: 0;
  font-size: var(--type-lg);
}

/* The business form: two columns of labelled fields, Cancel and Save changes bottom right. */
.settings-pane .business-facts-form .room-field.wide,
.settings-pane .business-facts-form .settings-form-actions {
  grid-column: 1 / -1;
}
.settings-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.settings-more {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.settings-reviews .room-button {
  justify-self: start;
}

/* Narrow room (a phone, or David's panel open beside it): the card stacks above the form. */
@container (max-width: 760px) {
  .settings-b-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-card {
    position: static;
  }
}
/* Phone width: one row of pills that scrolls sideways; Advanced scrolls with the rest. */
@container (max-width: 480px) {
  .settings-tabs {
    flex-wrap: nowrap;
  }
  .settings-tab-advanced {
    margin-left: 0;
  }
}
/* A narrow form pane takes its fields one per row. */
@container (max-width: 520px) {
  .business-facts-form,
  .settings-pane [data-business-identity] > form {
    grid-template-columns: minmax(0, 1fr);
  }
}