/* =====================================================================
   SETTINGS & INTEGRATIONS - STYLES  (Module #11)
   ---------------------------------------------------------------------
   New structures only (.set-*). Reuses the design system + shared
   command-center classes (.ds-*, .mc-* section shell, .c3-* nav, .rp-foot).
   Theme-aware via tokens; no hard-coded colors.
   ===================================================================== */

.set { display: flex; flex-direction: column; gap: var(--sp-6); }
.set-head { display: flex; flex-direction: column; gap: var(--sp-2); }

.set-note { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--ds-text-lo); line-height: var(--lh-normal); }
.set-note strong { color: var(--ds-text); }
.set-warn { color: var(--ds-danger-strong); font-weight: 600; }
.set-hint { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--ds-text-mute); line-height: var(--lh-normal); }
.set-hint strong { color: var(--ds-text-lo); }
.set-k { display: block; font-size: var(--fs-base); font-weight: 600; color: var(--ds-text-hi); }
.set-k--danger { color: var(--ds-danger-strong); }
.set-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ds-text-lo); line-height: var(--lh-snug); max-width: 60ch; }

/* rows: label block + control on the right */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--ds-hairline); flex-wrap: wrap; }
.set-row:last-child { border-bottom: none; }
.set-row > div:first-child { flex: 1 1 260px; min-width: 0; }

/* workspace fields */
.set-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.set-field { gap: var(--sp-2); }
.set-brandrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--ds-hairline); flex-wrap: wrap; }
.set-swatches { display: flex; gap: var(--sp-2); }
.set-swatch { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--ds-hairline-strong); }
.set-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.set-hint + .set-actions, .set-actions .set-hint { margin-top: 0; }

/* toggle switch */
.set-toggle { position: relative; width: 44px; height: 25px; border-radius: var(--r-pill); background: var(--ds-overlay-2); border: 1px solid var(--ds-hairline-strong); cursor: pointer; padding: 0; flex-shrink: 0; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.set-toggle__knob { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--ds-surface-2); box-shadow: var(--el-1); transition: transform var(--dur-2) var(--ease); }
.set-toggle.is-on { background: linear-gradient(135deg, var(--ds-gold-500), var(--ds-gold-300)); border-color: transparent; }
.set-toggle.is-on .set-toggle__knob { transform: translateX(19px); background: var(--ds-on-gold); }
.set-toggle:disabled { opacity: 0.4; cursor: not-allowed; }

/* integrations */
.set-ints { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.set-int { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); box-shadow: var(--el-1); }
.set-int--warn { border-color: color-mix(in srgb, var(--ds-danger) 30%, transparent); }
.set-int__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.set-int__name { display: block; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--ds-text-hi); }
.set-int__cat { font-size: var(--fs-xs); color: var(--ds-text-lo); letter-spacing: 0.03em; }
.set-int__blurb { margin: 0; font-size: var(--fs-sm); color: var(--ds-text-lo); line-height: var(--lh-snug); }
.set-int__acct { margin: 0; font-size: var(--fs-xs); color: var(--ds-text-lo); }
.set-int__acct strong { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.set-int__acct--off { color: var(--ds-text-mute); }
.set-int__powers { display: flex; flex-direction: column; gap: var(--sp-2); }
.set-k + .set-chips, .set-int__powers .set-k { margin: 0; }
.set-int__powers .set-k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ds-text-mute); font-weight: 700; }
.set-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.set-chip { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--ds-text); background: var(--ds-overlay); border: 1px solid var(--ds-hairline); }
.set-int__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--ds-hairline); flex-wrap: wrap; }
.set-int__sync { font-size: var(--fs-xs); color: var(--ds-text-mute); }
.set-int__btns { display: flex; gap: var(--sp-2); }

/* notifications matrix */
.set-ntable-wrap { overflow-x: auto; }
.set-ntable { display: flex; flex-direction: column; }
.set-ntable__head, .set-ntable__row { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(60px, 1fr)); gap: var(--sp-3); align-items: center; }
.set-ntable__head { padding: 0 0 var(--sp-3); border-bottom: 1px solid var(--ds-hairline-strong); }
.set-ntable__head > span:first-child { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ds-text-mute); font-weight: 700; }
.set-nchan { text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--ds-text-lo); }
.set-nchan em { display: block; font-style: normal; font-size: 0.6rem; color: var(--ds-text-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.set-ntable__row { padding: var(--sp-4) 0; border-bottom: 1px solid var(--ds-hairline); }
.set-ntable__row:last-child { border-bottom: none; }
.set-nev__label { display: block; font-weight: 600; color: var(--ds-text-hi); font-size: var(--fs-base); }
.set-nev__desc { font-size: var(--fs-xs); color: var(--ds-text-lo); }
.set-ncell { display: flex; justify-content: center; }

/* AI employees */
.set-airows { display: flex; flex-direction: column; gap: var(--sp-2); }
.set-airow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px dashed var(--ds-hairline-strong); background: var(--ds-surface-1); }
.set-airow__id { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.set-airow__glyph { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(212,175,55,0.12); color: var(--ds-gold-500); flex-shrink: 0; }
.set-airow__name { display: block; font-weight: 600; color: var(--ds-text-hi); font-size: var(--fs-base); }
.set-airow__desc { font-size: var(--fs-xs); color: var(--ds-text-lo); }
.set-airow__ctrl { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

/* team & roles */
.set-teamrow { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.set-member { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: var(--r-pill); background: var(--ds-overlay); border: 1px solid var(--ds-hairline); font-size: var(--fs-sm); color: var(--ds-text-hi); }
.set-member em { font-style: normal; color: var(--ds-text-lo); font-size: var(--fs-xs); }
.set-member__badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(212,175,55,0.14); color: var(--ds-accent); font-weight: 700; font-size: 0.62rem; }

/* danger zone */
.set-danger { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--ds-danger) 28%, transparent); background: var(--ds-danger-soft); flex-wrap: wrap; }

/* plan */
.set-plan { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-5); }
.set-plan__name { display: block; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--ds-text-hi); }
.set-plan__price { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--ds-accent); }
.set-plan__feats { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); color: var(--ds-text); font-size: var(--fs-sm); display: grid; gap: 6px; }
.set-plan__side { display: flex; flex-direction: column; gap: var(--sp-3); padding-left: var(--sp-5); border-left: 1px solid var(--ds-hairline); }
.set-plan__meta { display: flex; flex-direction: column; }
.set-plan__meta span { font-size: var(--fs-xs); color: var(--ds-text-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.set-plan__meta strong { color: var(--ds-text-hi); font-size: var(--fs-base); }

/* about */
.set-about { display: flex; flex-direction: column; gap: var(--sp-5); }
.set-about__brand { display: flex; align-items: center; gap: var(--sp-3); }
.set-about__brand .brand__logo { width: 44px; height: 44px; font-size: 1.2rem; }
.set-about__brand strong { display: block; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ds-text-hi); }
.set-about__brand span { font-size: var(--fs-sm); color: var(--ds-text-lo); }
.set-about__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.set-about__meta > div { display: flex; flex-direction: column; gap: 2px; }
.set-about__meta span { font-size: var(--fs-xs); color: var(--ds-text-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.set-about__meta strong { color: var(--ds-text-hi); font-size: var(--fs-base); }

/* responsive */
@media (max-width: 900px) {
  .set-grid2, .set-ints { grid-template-columns: 1fr; }
  .set-plan { grid-template-columns: 1fr; }
  .set-plan__side { border-left: none; padding-left: 0; border-top: 1px solid var(--ds-hairline); padding-top: var(--sp-4); }
  .set-about__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-ntable__head, .set-ntable__row { grid-template-columns: minmax(140px, 1.6fr) repeat(4, minmax(44px, 1fr)); }
}
@media (max-width: 560px) {
  .set-about__meta { grid-template-columns: 1fr; }
  .set-nev__desc { display: none; }
  .set-ntable { min-width: 460px; }
}