/* Settings page shell (#3482, Figma 31:48314, 31:47997, 31:47714, 31:47449):
 * header, tabs, sections (intro column + panel), the setting row with its
 * value pill and Edit, the toggle row, and the Set up guide drawer's body.
 * Tokens only. Figma's green-tinted greys (#17231f, #737d78, #dee4e1) map to
 * --fg-strong, --fg-muted and --border (Q-ORG-1 on #3432). */

/* ---- Content (31:48535): padding is the page's; gap 24 ---- */
.set-page { display: flex; flex-direction: column; gap: var(--space-6); }
.set-page > [role="status"] > [inert] { display: flex; flex-direction: column; gap: var(--space-6); }

/* ---- Header (31:48536) ---- */
.set-page .page-header { align-items: center; gap: var(--space-6); margin: 0; }
.set-page .page-header h1 { margin: 0; font: var(--type-h1); color: var(--fg-strong); }
.set-page .page-header .subtitle { margin: 3px 0 0; font: 600 14px/20px var(--font-sans); color: var(--fg-muted); }
.set-header-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.set-header-actions .btn { font-weight: 700; }
.set-header-actions .commands-btn { width: 160px; border-color: var(--border-control); }
.set-header-actions .set-guide-btn { width: 164px; }

/* ---- Body: banners, tabs, the shown tab ---- */
.settings-page { display: flex; flex-direction: column; gap: var(--space-6); }
.settings-page > [role="status"] > [inert] { display: flex; flex-direction: column; gap: var(--space-6); }
.settings-page .banner { margin: 0; }

/* ---- Tabs (31:48549): the ds underline tabs at Figma's 43.5 tall, SemiBold ---- */
.set-tabs { border-bottom: 1px solid var(--border-strong); overflow-x: auto; scrollbar-width: none; }
.set-tabs .ui-tab { flex: none; height: auto; padding: 11px var(--space-1) 12.5px; font-weight: 600; }
.set-tabs .ui-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---- Tab content (31:48558): intro, then sections; gap 28 ---- */
.set-tabpanel { display: flex; flex-direction: column; gap: 28px; }
.set-tabpanel[hidden] { display: none; }
.set-tab-title { margin: 0; font: 600 16px/24px var(--font-sans); color: var(--fg-strong); }
.set-tab-desc { margin: 5px 0 0; font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }

/* ---- Section (31:48562): intro column 232, panel flex 1; gap 32 ---- */
.set-section { display: flex; align-items: flex-start; gap: var(--space-7); }
.set-section-intro { display: flex; flex: 0 0 232px; flex-direction: column; gap: 7px; padding-top: var(--space-1); }
.set-section-title { margin: 0; font: 600 14px/20px var(--font-sans); color: var(--fg-strong); }
.set-section-desc { margin: 0; font: 400 12px/19px var(--font-sans); color: var(--fg-muted); }
.set-panel, .set-panel-plain { flex: 1; min-width: 0; }
.set-panel { overflow: hidden; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); }
.set-panel > .banner { margin: var(--space-4) var(--space-5) 0; }

/* ---- Setting row (31:48567): min 84, padding 20, gap 20; divider but the last ---- */
.set-row { scroll-margin-top: 72px; border-bottom: 1px solid var(--border); }
.set-panel > :last-child { border-bottom: 0; }
.set-row-head { display: flex; align-items: center; gap: var(--space-5); box-sizing: border-box; min-height: 84px; padding: var(--space-5); }
.set-row-details { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; }
.set-row-label { margin: 0; font: 500 13px/19px var(--font-sans); color: var(--fg-strong); }
.set-row-desc { margin: 0; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }

/* ---- Value pill (31:48571): 34 tall, padding 0 4 0 10, gap 12; Edit is Secondary S 56 ---- */
.set-pill {
  display: flex; flex: none; align-items: center; gap: var(--space-3); box-sizing: border-box; height: 34px; max-width: 100%;
  padding: 0 var(--space-1) 0 10px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.set-pill:has(.set-pill-text) { min-width: 230px; }
.set-pill-value { display: flex; flex: 1; min-width: 0; }
.set-pill-text {
  display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden;
  font: 400 11px/18px var(--font-mono); color: var(--fg-strong); white-space: nowrap; text-overflow: ellipsis;
}
.set-row-edit { width: 56px; padding: 0; }
/* Status badge (31:48628 Off, 31:48638 On): Inter 11/16, padding 2 6, radius 4. */
.set-badge { display: inline-flex; flex: none; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--fg-muted); font: 400 11px/16px var(--font-sans); }
.set-badge-on { background: var(--success-bg); color: var(--live-text); }
.set-badge-danger { background: var(--danger-bg); color: var(--danger-fg); font-weight: 600; }

/* ---- Edit expands the row in place (proposed, not in Figma: Q-ORG-11) ---- */
.set-row-body {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--motion-base) var(--ease-standard), visibility 0s linear var(--motion-base);
}
.set-row[data-open] > .set-row-body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--motion-base) var(--ease-standard), visibility 0s; }
.set-row-inner { min-height: 0; overflow: hidden; }
.set-row-form { display: grid; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); }
.set-row-body.flush .set-row-form { padding: 0; }
.set-row-body.flush .set-row-note { padding: 0 var(--space-5); }
.set-row-note { margin: 0; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
.set-row-form .save-row { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .set-row-body, .set-row[data-open] > .set-row-body { transition: none; }
}

/* ---- Toggle row (31:47990): padding 20, gap 24; Off/On beside the switch ---- */
.set-toggle-row { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-5); }
.set-toggle-row .set-row-details { gap: 5px; }
.set-toggle-row .set-row-label { line-height: 20px; }
.set-toggle-row .save-status { align-self: flex-start; }
.set-toggle-state { font: 400 12px/normal var(--font-sans); color: var(--fg-muted); }

/* ---- Set up guide drawer (owner decision; designed by us, not in Figma) ---- */
.set-guide-lead { margin: 0 0 var(--space-4); color: var(--fg-muted); }
.set-guide-group + .set-guide-group { margin-top: var(--space-6); }
.set-guide-heading { margin: 0 0 var(--space-3); font: 600 14px/20px var(--font-sans); color: var(--fg-strong); }
.set-guide-group dl { display: grid; gap: var(--space-4); margin: 0; }
.set-guide-item { padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.set-guide-item dt { font: 500 13px/19px var(--font-sans); color: var(--fg-strong); }
.set-guide-item dd { margin: var(--space-1) 0 0; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
.set-guide-item dd:last-child:has(.btn) { margin-top: var(--space-2); }
.set-guide-rec strong { font-weight: 600; color: var(--fg-strong); }

/* ---- Reflow (not in Figma): intro above panel below 900; pill under details below 600 ---- */
@media (max-width: 900px) {
  .set-section { flex-direction: column; gap: var(--space-3); }
  .set-section-intro { flex-basis: auto; padding-top: 0; }
  .set-panel, .set-panel-plain { width: 100%; }
}
@media (max-width: 600px) {
  .set-row-head { flex-wrap: wrap; gap: var(--space-3); min-height: 0; }
  .set-pill, .set-pill:has(.set-pill-text) { min-width: 0; width: 100%; }
  .set-header-actions { width: 100%; }
  .set-header-actions .btn, .set-header-actions .commands-btn, .set-header-actions .set-guide-btn { flex: 1; width: auto; }
}
.page:has(> .set-page) { max-width: 1140px; } /* Figma: 1204 main column less 32 padding each side */

/* ==== Access & members tab (#3485, Figma 31:47714) ==== */
/* The value pills hug their text here (31:47971 178 wide, 31:47980 151). */
[data-section="api-keys"] .set-pill, [data-section="people"] .set-pill { min-width: 0; }
/* Members (31:47985): the owner offer and admin-only note sit under the
 * intro's description (not in Figma). */
.set-section-intro:has(> .set-section-notes) { min-width: 0; }
.set-section-notes { display: grid; gap: var(--space-2); margin-top: var(--space-1); }
.set-section-notes .btn { height: auto; min-height: var(--btn-h); white-space: normal; text-align: left; }
.set-section-notes .banner { flex-direction: column; align-items: stretch; gap: 0; margin: 0; font: 400 12px/18px var(--font-sans); }
.set-section-notes .banner p { margin: 0; }
.set-section-notes .form-actions { margin: var(--space-2) 0 0; }
/* What Edit opens on API keys and People (proposed, not in Figma): the ds
 * table (#3440) in a card, Secondary/Primary S actions (#3438). */
[data-section="api-keys"] .set-row-form, [data-section="people"] .set-row-form { gap: var(--space-3); }
[data-section="api-keys"] .set-row-body.flush .set-row-form { padding: 0 var(--space-5) var(--space-5); }
[data-section="api-keys"] .set-row-body.flush .set-row-note { padding: 0; }
#set-keys, #people-body { display: grid; gap: var(--space-3); min-width: 0; }
.set-acc-sub { margin: var(--space-2) 0 0; font: 500 12px/18px var(--font-sans); color: var(--fg-strong); }
.set-acc-table { box-shadow: none; border-radius: var(--radius-lg); }
.set-acc-table .ui-table td { padding-block: var(--space-3); }
.set-acc-table .ui-table td.title { font-weight: 500; color: var(--fg-strong); }
.set-acc-table .ui-num { white-space: nowrap; }
.set-acc-table .ui-num .select { display: inline-flex; vertical-align: middle; }
.set-acc-table .ui-num .select select { height: 28px; min-height: 28px; padding-block: 0; }
.set-key-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.set-key-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.set-key-form label { flex-basis: 100%; font: 500 12px/18px var(--font-sans); color: var(--fg-strong); }
.set-key-form input { flex: 1 1 220px; width: auto; }
.set-key-reveal { margin: 0; }
.set-key-reveal .key-reveal code { background: var(--surface); }
#set-keys .key-status { margin: 0; font-size: 12px; }
.key-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); font-size: 12px; }
#set-keys .ms-state { padding-block: var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.key-docs { display: grid; gap: var(--space-2); }
.key-docs .code-snippet { margin: 0; border-radius: var(--radius); font-size: 12px; }
[data-section="members"] .save-status { padding: 0; font-size: 12px; }
.key-notes { margin: 0; padding-left: 1.2em; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
/* ==== end Access & members ==== */

/* ==== Review workflow tab (issue 3483, Figma 31:48562, 31:48594, 31:48608) ==== */
/* A pill with the On badge and a detail ("On · 2 repos"). */
.set-pill-value:has(.set-badge + .set-pill-text) { align-items: center; gap: var(--space-1); }
/* The Manual-only note under When reviews run's line (not in Figma). */
.set-row-manual p { margin: var(--space-1) 0 0; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
.set-row-manual[hidden] { display: none; }
/* Edit bodies: the ds choice list, with "(default)" kept on the option's line. */
#set-tabpanel-review-workflow .set-row-form .choice-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
#set-tabpanel-review-workflow .set-row-form .choice strong > .muted { display: inline; font-weight: 400; }
/* "Up to [n] commits per pull request" reads as one line. */
.set-row-form .commit-limit { margin-top: 0; }
.set-row-form .commit-limit label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 500; }
.set-row-form .commit-limit .inline-number { box-sizing: border-box; width: 72px; height: 32px; margin: 0; border-color: var(--input-border); }
.set-row-form .commit-limit p, .set-field-hint { margin: 0; font: 400 12px/18px var(--font-sans); }
/* Repository lists (rules files, release pull requests, who teaches rules): a ds text field. */
.set-repo-list textarea { min-height: 0; font-family: var(--font-mono); font-size: 12px; }
.set-row-form .suspend-row { margin-bottom: 0; }
.set-row-form .limit-list { margin-top: 0; }
/* ==== end Review workflow ==== */

/* ==== Findings & reporting tab (#3484, Figma 31:47997) ==== */
/* A text value pill hugs its value here (31:48276, 31:48300, 31:48309). */
[data-set-tabpanel="findings-reporting"] .set-pill:has(.set-pill-text) { min-width: 0; }
/* Dependency licenses' list: the ds text field, SPDX ids in mono. */
.set-license-field { max-width: 480px; }
.set-license-field label { font: 500 13px/19px var(--font-sans); color: var(--fg-strong); }
.set-license-field textarea { min-height: 112px; font: 400 13px/20px var(--font-mono); }
.set-license-field textarea::placeholder { color: var(--fg-muted); opacity: 1; }
.set-field-hint { margin: 0; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
/* Security advisories: where each severity goes (ds table, row headers in body type) and the list. */
.set-scanner-routing tbody th {
  height: auto; padding: var(--space-4) var(--space-3); background: none; border-bottom: 0; border-top: 1px solid var(--divider);
  font: var(--type-body-sm); letter-spacing: normal; text-transform: none; color: var(--fg); white-space: normal;
}
.set-scanner-routing tbody tr:first-child th { border-top: 0; }
.set-scanner-routing tbody th strong { font-weight: 500; color: var(--fg-strong); }
.set-scanner-routing tbody th p { margin: 2px 0 0; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
.set-scanner-routing td { padding: var(--space-4) var(--space-3); }
.set-scanner-routing tbody tr:hover { box-shadow: none; }
.set-scanner-routing .choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; border: 0; }
.set-scanner-routing .choice-row label { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-body-sm); color: var(--fg); white-space: nowrap; cursor: pointer; }
.set-subhead { margin: 0; font: 600 13px/19px var(--font-sans); color: var(--fg-strong); }
[data-scanner-settings] { display: grid; gap: var(--space-4); }
[data-scanner-settings] .save-status:empty { display: none; }
[data-scanner-settings] .plain-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font: var(--type-body-sm); color: var(--fg); }
[data-scanner-settings] .scanner-advisory ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); color: var(--fg-muted); }
/* ==== end Findings & reporting ==== */
/* ==== Organization tab: Remove organization (#3486, Figma 31:47697) ==== */
/* The danger card (31:47701): 1px danger-border-subtle, radius 10. #3435's
 * danger-border-subtle / danger-surface-subtle are not in tokens.css; the
 * border takes --risk-p0-border (light #fecdd3 for #ebcfcf, dark #5c2a2a for
 * #5a1e1e) and the bar is --danger-bg mixed into the card's --surface. */
.set-danger-card {
  --set-danger-border: var(--risk-p0-border);
  --set-danger-bar: light-dark(color-mix(in srgb, var(--danger-bg) 25%, var(--surface)), color-mix(in srgb, var(--danger-bg) 60%, var(--surface)));
  scroll-margin-top: 72px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--set-danger-border); border-radius: var(--radius-lg);
}
/* Details (31:47702): padding 24, gap 16; heading row gap 10 */
.set-danger-details { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.set-danger-title { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 14px/normal var(--font-sans); color: var(--fg-strong); }
.set-danger-icon { flex: none; color: var(--danger-fg); }
.set-danger-text { margin: 0; font: 400 13px/22px var(--font-sans); color: var(--fg-muted); }
.set-danger-note { margin: calc(-1 * var(--space-2)) 0 0; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
/* Action bar (31:47708): tinted, top border, padding 16 24, right-aligned; button L 196 */
.set-danger-bar {
  display: flex; justify-content: flex-end; padding: var(--space-4) var(--space-6);
  background: var(--set-danger-bar); border-top: 1px solid var(--set-danger-border);
}
.set-danger-btn { min-width: 196px; }
.set-danger-btn > svg { --btn-glyph: 16px; }
/* The confirm modal (#3442 overlays): today's points, then the typed name. */
.set-danger-points { margin: 0; }
.set-danger-points + .field label strong { font-family: var(--font-mono); }
#remove-org-dialog .field-error { margin-top: calc(-1 * var(--space-2)); }
@media (max-width: 600px) {
  .set-danger-bar { justify-content: stretch; }
  .set-danger-btn { flex: 1; min-width: 0; }
}
/* ==== end Organization ==== */