/* A5 CRM — settings.css (screen: Настройки #/settings; DESIGN-STRIPE.md §6.8). Owned by screens/settings.js.
   Every class is prefixed "sg-" so nothing leaks into other screens. Stripe settings language: the section tabs are an
   underline tab bar under the page header, section header rows with a hairline, Stripe tables, bordered cards, the
   phone preview as a framed surface. Every colour is a token of base.css (both themes); motion uses --dur-* / --ease-*. */

.sg{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0;background:var(--bg)}

/* ── section tabs (§6.8: always the horizontal Stripe tab bar, §5.9) ── */
.sg-nav{position:relative;display:flex;align-items:flex-end;gap:24px;min-width:0;margin-top:-4px;padding:0 var(--gutter-x);
  background:linear-gradient(var(--border),var(--border)) content-box bottom / 100% 1px no-repeat}   /* 1 px baseline under the tabs, content width only; −4 px = the H1-to-tab spacing of [S team] */
.sg-ng,.sg-navf{display:none}
.sg-ni{position:relative;display:inline-flex;align-items:center;flex:none;padding:0 0 8px;font:var(--t-body-strong);color:var(--text-2);white-space:nowrap;text-align:left;transition:color var(--dur-1)}
.sg-ni .ic{display:none}
.sg-ni:hover{color:var(--text-strong)}
.sg-ni.on{color:var(--text-strong)}   /* monochrome tab (DESIGN-CALM §3.2) */
.sg-ni:focus-visible{border-radius:var(--radius-xs);outline:var(--focus-outline);outline-offset:2px;box-shadow:none}   /* 2 px clear of the label and the count; padding would widen the ink (offsetWidth) */
.sg-nc{margin-left:6px;font:var(--t-body);color:var(--text-3);font-variant-numeric:tabular-nums}
.sg-nc:empty{display:none}
/* the moving ink: JS sets width + translateX (moveMark) */
.sg-mark{position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:1px;background:var(--tab-ink);pointer-events:none;
  transition:transform var(--dur-3) var(--ease-out),width var(--dur-3) var(--ease-out)}
.sg-mark.no-anim{transition:none}

/* ── content column (contained per §4.5) ── */
.sg-main{min-height:0;overflow:auto;padding:16px var(--gutter-x) 48px;background:var(--bg)}
.sg-pane{min-width:0}
.sg-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* section header row [S profile]: 20/28 title, 14/20 description, actions right, hairline 12 px below; it scrolls away with
   its section like Stripe's settings headers [S profile-scrolled] (only the page header is fixed, §9.5) */
.sg-h{display:flex;align-items:flex-start;gap:16px;margin:0 0 24px;padding:0 0 12px;border-bottom:1px solid var(--border-soft)}
.sg-h-t{flex:1;min-width:0}
.sg-h h2{margin:0;font:var(--t-heading);color:var(--text-strong)}
.sg-h p{margin:4px 0 0;max-width:660px;font:var(--t-body);color:var(--text-3)}
.sg-h-r{display:flex;align-items:center;gap:8px;flex:none;min-height:28px}
/* header actions are secondary buttons (§6.8 [S profile «Edit», «Add a passkey»]); only «Пригласить» (Команда) stays primary */
.sg-h-r .btn.g:not([data-act="invite"]){background:var(--btn-bg);color:var(--btn-text);box-shadow:var(--shadow-control),0 0 0 1px var(--border)}
.sg-h-r .btn.g:not([data-act="invite"]):hover{background:var(--btn-bg-hover);box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong)}
.sg-h-r .btn.g:not([data-act="invite"]):active{background:var(--surface-hover)}
.sg-h-r .btn.g:not([data-act="invite"]):focus-visible{outline:none;box-shadow:var(--shadow-control),var(--focus-ring)}
.sg-saved{display:inline-flex;align-items:center;gap:4px;margin-right:8px;font:var(--t-caption);color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums;transition:color var(--dur-3) var(--ease-out)}
.sg-saved:last-child{margin-right:0}
.sg-saved .ic{width:12px;height:12px;stroke-width:2.4;color:var(--success)}
.sg-saved.on{color:var(--text)}
.sg-saved.on .ic{animation:sg-pop var(--dur-4) var(--ease-spring)}
@keyframes sg-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.sg-sec{margin-bottom:48px}
.sg-sec:last-child{margin-bottom:0}
/* sub-sections get the same header as .sg-h [S profile-view: «User», «Passkeys», «Language» are all 20/28 700 over a
   --border-soft hairline]; the hairline doubles as the top rule of the list or table that follows */
.sg-sech{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-bottom:12px;border-bottom:1px solid var(--border-soft)}
.sg-sech h3{margin:0;font:var(--t-heading);color:var(--text-strong)}
.sg-sech > .btn,.sg-sech > .sg-filt{margin-left:auto}
.sg-sech > .btn.sm{height:var(--control-h);gap:6px;font:var(--t-body-strong)}   /* section actions are 28 px secondary buttons */
.sg-sech > .muted{font:var(--t-body);color:var(--text-3)}
.sg-sech + .sg-opts,.sg-sech + .sg-jr{border-top:0}
.sg-sech + .sg-rl > .sg-rlh{box-shadow:inset 0 -1px 0 var(--border-soft)}

/* ── shared controls ── */
/* the switch look is the shared one (components.css §5.8: .sg-sw,.switch) */

/* status badges (§5.10 map: ok / off / pend / bad = success / neutral / warning / danger) */
.sg-stt{display:inline-flex;align-items:center;gap:4px;flex:none;height:20px;padding:0 6px;border-radius:var(--radius-xs);white-space:nowrap;vertical-align:middle;
  font:var(--t-caption-strong);background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border)}
.sg-stt i{display:none}
.sg-stt.ok{background:var(--badge-success-bg);color:var(--badge-success-text);box-shadow:inset 0 0 0 1px var(--badge-success-border)}
.sg-stt.pend{background:var(--badge-warning-bg);color:var(--badge-warning-text);box-shadow:inset 0 0 0 1px var(--badge-warning-border)}
.sg-stt.pend i{display:block;width:6px;height:6px;border-radius:50%;background:var(--dot-orange)}   /* static, no pulse; status-dot hue (DESIGN-CALM §3.7) */
.sg-stt.bad{background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border)}

/* «Проверить» busy state: the live spinner look (§5.25) */
.btn.sg-busy,.btn.sg-busy[disabled]{opacity:1;pointer-events:none;color:var(--text-3)}
.btn.sg-busy .ic{display:none}
.btn.sg-busy::before{content:"";flex:none;box-sizing:border-box;width:12px;height:12px;border:2px solid var(--border-soft);border-top-color:var(--text-3);border-radius:50%;animation:sg-spin .8s linear infinite}
@keyframes sg-spin{to{transform:rotate(360deg)}}

.sg-none{font:var(--t-body);color:var(--text-3)}
/* «+ Добавить …» = dashed box (§5.24 #2) with a neutral ghost action inside (DESIGN-CALM §3.10: main action of its block = --text-2) */
.sg-add{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:80px;margin-top:16px;padding:16px;border:1px dashed var(--border);border-radius:var(--radius-m);
  background:transparent;font:var(--t-body-strong);color:var(--text-2);transition:border-color var(--dur-1),background var(--dur-1),color var(--dur-1)}
.sg-add .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon);transition:color var(--dur-1)}
.sg-add:hover{border-color:var(--border-strong);background:var(--surface-hover);color:var(--text-strong)}
.sg-add:hover .ic{color:var(--text-strong)}
.sg-add:focus-visible{box-shadow:var(--focus-ring)}
.sg-foot{display:flex;align-items:flex-start;gap:8px;max-width:780px;margin:16px 0 0;font:var(--t-caption);color:var(--text-3)}
.sg-foot .ic{width:12px;height:12px;margin-top:2px;flex:none;stroke-width:2.4;color:var(--icon)}

/* inline-edit field (§5.3): plain text at rest, hover fill, the input ring while editing */
.sg-ie{width:100%;min-width:0;height:var(--control-h);padding:0 8px;border:0;border-radius:var(--radius-s);background:transparent;box-shadow:none;outline:0;
  font:var(--t-body);color:var(--text-strong);transition:background var(--dur-1),box-shadow var(--dur-1)}
.sg-ie:hover{background:var(--surface-offset-hover)}   /* the row under it is already --surface-hover (§2.4: step up) */
.sg-ie:focus{background:var(--surface);box-shadow:var(--focus-ring)}
.sg-ie.num{font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.sg-ie.num::-webkit-outer-spin-button,.sg-ie.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sg-ie.err{background:var(--surface);box-shadow:0 0 0 1px var(--danger)}
.sg-ie.err:focus{background:var(--surface);box-shadow:0 0 0 1px var(--danger),inset 0 0 0 1px var(--danger)}   /* focused error = 2 px red, no blue (DESIGN-CALM §3.8) */
/* number + unit («10 %», «3 дн.»): the wrapper is the editable box, like the §5.3 prefix wrapper .fx. At rest it is plain
   text with the unit 4 px after the digits; hover fills it, editing rings number and unit together. The padding never
   changes, so focus causes no layout shift; the input hugs its digits (field-sizing) and starts at the column edge. */
.sg-numin,.sg-remin{display:inline-flex;align-items:center;gap:4px;height:var(--control-h);padding:0 8px;border-radius:var(--radius-s);cursor:text;
  transition:background var(--dur-1),box-shadow var(--dur-1)}
.sg-numin:hover,.sg-remin:hover{background:var(--surface-offset-hover)}   /* the row under it is already --surface-hover (§2.4: step up) */
.sg-numin:focus-within,.sg-remin:focus-within{background:var(--surface);box-shadow:var(--focus-ring)}
.sg-numin:has(.err),.sg-remin:has(.err){background:var(--surface);box-shadow:0 0 0 1px var(--danger)}
.sg-numin:has(.err):focus-within,.sg-remin:has(.err):focus-within{box-shadow:0 0 0 1px var(--danger),inset 0 0 0 1px var(--danger)}
:is(.sg-numin,.sg-remin) .sg-ie.num,:is(.sg-numin,.sg-remin) .sg-ie.num:is(:hover,:focus,.err){width:auto;min-width:1ch;height:20px;padding:0;border-radius:0;
  field-sizing:content;text-align:left;background:transparent;box-shadow:none;cursor:text}
:is(.sg-numin,.sg-remin) .u{font:var(--t-body);color:var(--text-3);cursor:text}

/* ═════ Воронка ═════ */
.sg-pvh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;font:var(--t-caption);color:var(--text-3)}
/* kanban preview: mini lanes (--surface-offset, r8) with mini raised cards */
.sg-pv{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-bottom:32px}
.sg-pvc{display:grid;align-content:start;gap:0;min-width:0;padding:8px 8px 10px;border-radius:var(--radius-m);background:var(--surface-offset);text-align:left;transition:background var(--dur-1)}
.sg-pvc b{font:var(--t-caption-strong);color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sg-pvc small{font:var(--t-caption);color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sg-pvc:hover,.sg-pvc.sg-hl{background:var(--surface-offset-hover)}
.sg-pvc:focus-visible{box-shadow:var(--focus-ring)}
.sg-pvk{display:grid;gap:4px;margin-top:8px}
.sg-pvk i{display:block;height:10px;border-radius:var(--radius-xs);background:var(--surface-card);box-shadow:var(--shadow-1)}
.sg-pvk i.rot{box-shadow:inset 0 2px 0 var(--danger),var(--shadow-1)}   /* stuck deal = the red of Pipe's stuck clock (pipe.css .dc-ft .stk) */
.sg-pvk em{font:var(--t-caption);font-style:normal;color:var(--text-3);font-variant-numeric:tabular-nums}
.sg-pvk em.none{height:10px;border:1px dashed var(--border);border-radius:var(--radius-xs)}

/* stage table = Stripe table (§5.12): 36 px header with the --border top rule, 56 px two-line rows */
.sg-tbl{--cols:24px 28px minmax(160px,1.4fr) 150px 214px minmax(170px,1fr) 28px}
.sg-th,.sg-row{display:grid;grid-template-columns:var(--cols);align-items:center;column-gap:12px}
.sg-th{height:var(--row-h);padding:0 6px;box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 var(--border-soft)}
.sg-th .lbl{font:var(--t-caption-strong);color:var(--text-strong)}
.sg-th > .lbl:nth-child(2){text-align:center}   /* «#» sits over the centred row numbers .sg-n */
.sg-rows{position:relative;transition:background var(--dur-2) var(--ease-out)}
.sg-rows.is-dragging{background:var(--surface-offset)}
.sg-row{position:relative;height:var(--row-h-2);padding:0 6px;background:var(--surface);border-bottom:1px solid var(--border-soft);transition:background var(--dur-1)}
.sg-row:last-child{border-bottom-color:var(--border)}
.sg-row:hover,.sg-row.sg-hl{background:var(--surface-hover)}
.sg-grip{display:grid;place-items:center;width:24px;height:28px;border-radius:var(--radius-xs);color:var(--icon);cursor:grab;touch-action:none;transition:color var(--dur-1),background var(--dur-1)}
.sg-grip .ic{width:16px;height:16px}
.sg-grip:hover{background:var(--surface-offset-hover);color:var(--text-strong)}
.sg-grip:focus-visible{box-shadow:var(--focus-ring);color:var(--text-strong)}
.sg-n{font:var(--t-body);color:var(--text-3);text-align:center;font-variant-numeric:tabular-nums}
.sg-name{position:relative;display:flex;align-items:center;min-width:0}
.sg-name .sg-ie{margin-left:-8px;padding-right:28px;font:var(--t-body-strong);color:var(--text-strong)}
.sg-okm{position:absolute;top:50%;right:6px;display:grid;place-items:center;width:16px;height:16px;margin-top:-8px;color:var(--success);opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.sg-okm.on{opacity:1;transform:none}
.sg-okm .ic{width:12px;height:12px;stroke-width:2.4}
/* the value starts at the column edge under «Вероятность»; a fixed first track keeps the bars aligned whatever the digits */
.sg-prob{display:grid;grid-template-columns:48px 52px;align-items:center;column-gap:12px}
.sg-numin{justify-self:start;margin-left:-8px}
.sg-pbar{position:relative;flex:none;width:52px;height:4px;border-radius:2px;background:var(--border-soft);overflow:hidden}
.sg-pbar i{position:absolute;top:0;bottom:0;left:0;border-radius:2px;background:var(--meter);transition:width var(--dur-3) var(--ease-out)}
.sg-rem{display:flex;align-items:center;gap:12px;min-width:0}
.sg-remin{max-width:0;margin-left:-12px;padding:0;overflow:hidden;opacity:0;
  transition:max-width var(--dur-3) var(--ease-out),padding var(--dur-3) var(--ease-out),margin var(--dur-3) var(--ease-out),opacity var(--dur-2) var(--ease-out),background var(--dur-1),box-shadow var(--dur-1)}
.sg-rem.on .sg-remin{max-width:120px;margin-left:-4px;padding:0 8px;overflow:visible;opacity:1}   /* box 8 px after the switch so the focus ring clears it; off: −12 cancels the gap */
.sg-remoff{font:var(--t-body);color:var(--text-3);white-space:nowrap}
.sg-rem.on .sg-remoff{display:none}
.sg-deals{display:grid;gap:0;min-width:0;font:var(--t-body)}
.sg-dl1{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.sg-cnt{font-weight:600;color:var(--text-strong);text-decoration:none;transition:color var(--dur-1)}
.sg-cnt:hover{color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--text-3);text-decoration-thickness:1px;text-underline-offset:3px}   /* record link hover (DESIGN-CALM §3.10), no accent */
.sg-deals small{font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums}
/* «⏱ 1 зависла» = status mark, the same signal and look as Pipe's .dc-ft .stk (DESIGN-CALM §3.7): a red 12 px clock glyph
   + neutral 12/16 text, no badge */
.sg-rot{display:inline-flex;align-items:center;gap:4px;cursor:default;font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums}
.sg-rot .ic{width:12px;height:12px;stroke-width:2.4;flex:none;color:var(--danger)}
/* row «…» (§5.12 actions column): a 24×24 ghost icon button, radius 4, 16 px dots in --icon-strong (generic .x); on a
   hovered row its hover steps up to --surface-offset-hover so it still differs from the row (§2.4, §7.4 #15) */
:is(.sg-row,.sg-rr,.sg-mr,.sg-mb,.sg-chr) .x{width:24px;height:24px;border-radius:var(--radius-xs);justify-self:end}
:is(.sg-row,.sg-rr,.sg-mr,.sg-ir):is(:hover,.sg-hl) :is(.x,.btn.q):hover{background:var(--surface-offset-hover)}

/* drag: lifted row follows the pointer, others glide aside, drop settles */
.sg-rows.is-dragging .sg-row{transition:transform var(--dur-3) var(--ease-move)}
.sg-rows.is-dragging .sg-row.lift{z-index:3;background:var(--surface-raised);border-radius:var(--radius-s);border-bottom-color:transparent;box-shadow:var(--shadow-3);transition:box-shadow var(--dur-2) var(--ease-out)}
.sg-rows.is-dragging .sg-row.lift.settle{box-shadow:var(--shadow-1);transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.sg-rows.is-dragging .sg-row.lift .sg-grip{color:var(--text-strong)}
.sg-rows.no-anim .sg-row{transition:none!important}
body.sg-grabbing,body.sg-grabbing *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}

/* ═════ Каналы ═════ */
.sg-sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:var(--t-body);color:var(--text)}
.sg-sum b{font-weight:600;color:var(--text-strong)}
.sg-grp{margin-top:48px}   /* 48 px between sections (§6.8) */
.sg-sum + .sg-grp{margin-top:32px}
/* group labels are section headers like .sg-sech [S profile-view] */
.sg-grp > .lbl{display:block;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-soft);font:var(--t-heading);color:var(--text-strong)}
/* channel card = bordered card (§5.14) with a 60 px header row */
.sg-ch{margin-bottom:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m)}
.sg-ch:last-child{margin-bottom:0}
.sg-chh{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px}
.sg-logo{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--radius-m);background:var(--surface-offset);color:var(--icon)}
.sg-logo .ic{width:20px;height:20px}
.sg-logo.wa{color:var(--wa)}
.sg-logo.sm{width:28px;height:28px;border-radius:50%;background:var(--surface)}
.sg-logo.sm .ic{width:16px;height:16px}
.sg-cht{display:grid;flex:1;min-width:0}
.sg-cht b{font:var(--t-heading-s);color:var(--text-strong)}
.sg-cht small{font:var(--t-body);color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sg-chr{display:flex;align-items:center;gap:8px;margin-left:8px}
.sg-chp{max-width:780px;margin:0;padding:0 16px 16px 68px;font:var(--t-body);color:var(--text-3)}
.sg-chb{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:32px;padding:8px 16px 8px 68px;border-top:1px solid var(--border-soft)}
/* key / value: 120 px label column, labels 600 [S profile] */
.sg-kv{display:grid;grid-template-columns:120px minmax(0,1fr);align-content:start;column-gap:16px;margin:0;font:var(--t-body)}
.sg-kv dt{padding:8px 0;font-weight:600;color:var(--text-strong)}
.sg-kv dd{display:flex;align-items:flex-start;gap:6px;min-width:0;margin:0;padding:8px 0;color:var(--text)}
.sg-kv dd .ic{width:16px;height:16px;margin-top:2px;flex:none;color:var(--success)}
/* option rows: 60 px, text left, switch right */
.sg-opts{display:grid;border-top:1px solid var(--border-soft)}
/* the distributor's status line under its switch */
.sg-autost{margin:12px 0 0;font:var(--t-body);color:var(--text-3)}
/* «Памятка для ИИ»: a description, the notes (a plain textarea), the save row */
.sg-memo-d{margin:12px 0;max-width:720px;font:var(--t-body);color:var(--text-2)}
/* live: what the AI changes by itself (a fixed list, the rules of server/ai-routing.mjs) */
.sg-facts{margin:12px 0 0;padding:0 0 0 18px;max-width:760px;display:grid;gap:8px;font:var(--t-body);color:var(--text-2)}
.sg-facts b{color:var(--text-strong);font-weight:600}
/* live templates (read-only text of a Meta template; {{n}} marked) */
.sg-ltb{margin:0;padding:10px 12px;border-radius:var(--radius-sm);background:var(--bg-subtle,var(--badge-neutral-bg));font:var(--t-body);color:var(--text);white-space:normal}
mark.sg-var{background:none;color:inherit}
.sg-memo .sg-txt textarea{min-height:168px;font:var(--t-body)}
.sg-memo-f{display:flex;align-items:center;gap:12px;margin-top:8px}
.sg-memo-f .sg-autost{margin:0;flex:1;min-width:0}
.sg-autost b{font-weight:600;color:var(--text-strong)}
.sg-autost .red{color:var(--danger)}
.sg-sw[disabled]{opacity:.5;cursor:default}
.sg-opt{display:flex;align-items:center;gap:16px;min-height:60px;padding:8px 0;border-bottom:1px solid var(--border-soft)}
.sg-opt > span:first-child{display:grid;flex:1;gap:0;min-width:0}
.sg-opt b{font:var(--t-body-medium);color:var(--text-strong)}
.sg-opt small{font:var(--t-body);color:var(--text-3)}
.sg-opts.sm{border-top:0}
.sg-opts.sm .sg-opt:last-child{border-bottom:0}
.sg-opt.dis b{color:var(--text-disabled)}
.sg-lock{display:grid;place-items:center;width:36px;flex:none;color:var(--icon)}
.sg-lock .ic{width:16px;height:16px}
/* sync log = mini table, mono timestamps 12/16 */
.sg-log{padding:12px 16px 16px 68px;border-top:1px solid var(--border-soft)}
.sg-logh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sg-logh .lbl{font:var(--t-body-strong);color:var(--text-strong)}
.sg-logl{border-top:1px solid var(--border)}
.sg-lg{display:grid;grid-template-columns:116px 118px 150px minmax(0,1fr);align-items:center;gap:12px;height:var(--row-h);padding:0 6px;border-bottom:1px solid var(--border-soft);
  font:var(--t-body);color:var(--text);text-decoration:none;transition:background var(--dur-1)}
.sg-lg:hover{background:var(--surface-hover);color:var(--text)}
.sg-lg:focus-visible{outline:var(--focus-outline);outline-offset:-1px;box-shadow:none}   /* row focus = exactly 1 px: cancel the global ring (DESIGN-CALM §3.9) */
.sg-lg .lbl{font:var(--t-mono);color:var(--text-3)}
.sg-lgd{display:flex;align-items:center;gap:6px;color:var(--text-2);white-space:nowrap}
.sg-lgd .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.sg-lg.in .sg-lgd{color:var(--text)}
.sg-lgc{overflow:hidden;font-weight:600;color:var(--text-strong);white-space:nowrap;text-overflow:ellipsis}
.sg-lgx{overflow:hidden;color:var(--text-3);white-space:nowrap;text-overflow:ellipsis}
.sg-logl > .sg-none{padding:8px 6px}
/* the full log in the drawer (raised surface) */
.sg-logl.full{border-top:0}
.sg-logl.full .sg-lg{grid-template-columns:52px 118px minmax(0,1fr);row-gap:2px;height:auto;min-height:var(--row-h);padding:8px 6px}
.sg-logl.full .sg-lgx{grid-column:2/-1}
.drawer .sg-lg:hover{background:var(--surface-hover-raised)}
.sg-lgday{padding:16px 6px 4px;font:var(--t-caption-strong);color:var(--text-3);border-bottom:1px solid var(--border)}
.sg-logl.full .sg-lgday:first-child{padding-top:0}
.sg-drf{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;font:var(--t-caption);color:var(--text-3)}
/* mailboxes: 36 px rows, one line */
.sg-mbs{padding:4px 16px 4px 68px;border-top:1px solid var(--border-soft)}
.sg-mb{display:flex;align-items:center;gap:12px;min-height:var(--row-h);padding:4px 0;border-bottom:1px solid var(--border-soft)}
.sg-mb:last-child{border-bottom:0}
.sg-mbi{display:grid;place-items:center;flex:none;width:16px;height:16px;color:var(--icon)}
.sg-mbi .ic{width:16px;height:16px}
.sg-mbt{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0}
.sg-mbt b{flex:none;max-width:60%;overflow:hidden;font:var(--t-body-medium);color:var(--text-strong);white-space:nowrap;text-overflow:ellipsis}
.sg-mbt small{flex:1;min-width:0;overflow:hidden;font:var(--t-body);color:var(--text-3);white-space:nowrap;text-overflow:ellipsis}
.sg-mb.dim .sg-mbt b{color:var(--text-2)}

/* ── modals opened from settings (rendered in #overlay) ── */
.sg-mp{margin:0 0 16px;font:var(--t-body);color:var(--text)}
/* OAuth explainer: numbered steps, 24 px counters (the dialog body is --surface-offset, so the counter is a white disc with a keyline) */
.sg-steps{display:grid;gap:12px;margin:0 0 24px;padding:0;list-style:none;counter-reset:sg}
.sg-steps li{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:12px;counter-increment:sg;font:var(--t-body);color:var(--text)}
.sg-steps li::before{content:counter(sg);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);
  font:var(--t-caption-strong);color:var(--text-2);font-variant-numeric:tabular-nums}
.sg-steps li > span{padding-top:2px}
.sg-steps b{font-weight:600;color:var(--text-strong)}
/* read-only OAuth scopes list */
.sg-scopes{display:grid;gap:0;margin:24px 0 0;padding:0;font:var(--t-body)}
.sg-scopes .lbl{margin-bottom:4px;font:var(--t-caption-strong);color:var(--text-2)}
.sg-scopes .y,.sg-scopes .n{display:flex;align-items:center;gap:8px;min-height:28px;color:var(--text)}
.sg-scopes .y .ic{width:12px;height:12px;stroke-width:2.4;color:var(--success)}
.sg-scopes .n{color:var(--text-3)}
.sg-scopes .n .ic{display:none}
.sg-scopes .n::before{content:"";width:12px;height:2px;flex:none;border-radius:1px;background:var(--text-4)}   /* 12 px dash */
.sg-mnote{display:flex;align-items:center;gap:8px;margin:16px 0 0;font:var(--t-caption);color:var(--text-3)}
.sg-mnote .ic{width:12px;height:12px;flex:none;stroke-width:2.4;color:var(--icon)}
.sg-mf{margin-top:32px}
.sg-mf > .lbl{display:block;margin-bottom:8px;font:var(--t-body-strong);color:var(--text-title)}
/* radio cards (§5.7); they live in modals, so the unselected card is the modal's raised fill (--surface would read as a hole in dark) */
.sg-rcs{display:grid;gap:8px}
.sg-rc{position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:var(--radius-s);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border);cursor:pointer;transition:box-shadow var(--dur-1)}
.sg-rc:hover{box-shadow:0 0 0 1px var(--border-strong)}
.sg-rc.on{background:var(--accent-bg);box-shadow:0 0 0 1px var(--accent)}   /* choice card: accent tint + 1 px accent, neutral title (DESIGN-CALM §3.5) */
.sg-rc input{margin-top:2px}
.sg-rc > span{display:grid;gap:2px}
.sg-rc b{font:var(--t-body-strong);color:var(--text-strong)}
.sg-rc.on b{color:var(--text-strong)}
.sg-rc small{font:var(--t-caption);color:var(--text-3)}

/* rule modal */
.sg-rm{display:grid;gap:32px}   /* field-to-field gap 32 (§5.3 form layout) */
.sg-rml{display:grid;grid-template-columns:32px minmax(0,1.2fr) minmax(0,1fr);align-items:end;gap:12px}
.sg-rmk{display:flex;align-items:center;height:var(--control-h);font:var(--t-body-strong);color:var(--text-3)}
.sg-rmm button[disabled]{opacity:.5;cursor:default}
/* «Так правило будет работать» = info card (§5.14); inside the raised modal it takes the raised grey so it still reads in dark (offset = raised there) */
.sg-rmpv{padding:12px 16px;border-radius:var(--radius-m);background:var(--surface-hover-raised);font:var(--t-body);color:var(--text)}
.sg-rmpv .lbl{color:var(--text-2)}
.sg-rmpv p{margin:4px 0 0}
.sg-rmpv b{font-weight:600;color:var(--text-strong)}
.sg-rmpv .sg-arr{color:var(--text-3)}
.sg-rmpv p.muted{display:flex;align-items:center;gap:6px;font:var(--t-caption);color:var(--text-3)}
.sg-rmpv p.muted .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}

/* local popover (role / mode / mailbox owner): a menu (§5.15); the two-line items are in components.css */
.sg-pop{max-width:340px}
.sg-pop .mi.sg-pi > span{display:grid;gap:0}
.sg-pop .mi.sg-pi .ic{margin-top:2px}
.sg-pop .mi.sg-pi.on b{color:var(--text-strong)}
.sg-pop .mi[disabled] :is(b,small){color:var(--text-disabled)}
.sg-pnote{margin-top:4px;padding:8px 12px 4px;border-top:1px solid var(--border-soft);font:var(--t-caption);color:var(--text-3)}

/* ═════ Шаблоны: three panes 290 | 1fr | 300 inside a bordered frame ═════ */
.sg-tp{display:grid;grid-template-columns:290px minmax(0,1fr) 300px;min-height:540px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden}
.sg-tpl{max-height:760px;overflow:auto;padding:4px;border-right:1px solid var(--border-soft)}
/* list rows, 44 px with two lines (name 14/20 + status 12/16, §6.8); selected = the grey selected fill, no accent outline (DESIGN-CALM §3.5);
   keyboard focus = the one 1 px --focus-color inset */
.sg-tpr{position:relative;display:grid;align-content:center;gap:0;width:100%;height:44px;padding:0 12px;border-bottom:1px solid var(--border-soft);text-align:left;transition:background var(--dur-1)}
.sg-tpr:last-child{border-bottom-color:transparent}
.sg-tpr:hover{border-radius:var(--radius-s);background:var(--surface-hover)}
.sg-tpr.on{border-radius:var(--radius-s);border-bottom-color:transparent;background:var(--row-selected);box-shadow:none}
.sg-tpr:has(+ .sg-tpr.on){border-bottom-color:transparent}
.sg-tpr:focus-visible{border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px var(--focus-color)}
.sg-tpr > b{overflow:hidden;font:var(--t-body-strong);color:var(--text-strong);white-space:nowrap;text-overflow:ellipsis}
.sg-tpr small{display:flex;align-items:center;gap:0 6px;min-width:0;overflow:hidden;font:var(--t-caption);color:var(--text-3);white-space:nowrap}
.sg-tpr small > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sg-tps{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text-2)}
/* status dot + neutral label: the colour lives only in the dot (DESIGN-CALM §3.7 [S contacts-status]) */
.sg-tps i{width:8px;height:8px;border-radius:50%;background:var(--dot-neutral)}
.sg-tps.ok i{background:var(--dot-green)}
.sg-tps.pend i{background:var(--dot-orange)}
.sg-tps.bad i{background:var(--dot-red)}
.sg-tprx{display:none}   /* the text preview is in the editor and the phone preview; rows keep two lines */
.sg-tpl > .empty{margin:32px 16px}
/* editor */
.sg-ed{display:grid;align-content:start;gap:24px;min-width:0;padding:16px 20px 20px;border-right:1px solid var(--border-soft)}
.sg-ed > .empty{margin:96px auto 48px;padding:0 20px}
.sg-edh{display:flex;align-items:center;justify-content:space-between;min-height:28px}
.sg-edh > div{display:flex;align-items:center;gap:8px}
/* notices = banners (§5.14): rejected = critical, pending = default */
.sg-rej,.sg-pendn{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface);font:var(--t-body);color:var(--text)}
.sg-rej .ic,.sg-pendn .ic{width:16px;height:16px;margin-top:2px;flex:none}
.sg-rej{background:var(--banner-critical-bg);border-color:var(--banner-critical-border);color:var(--badge-danger-text)}
.sg-rej b{font-weight:600;color:inherit}
.sg-pendn .ic{color:var(--icon)}
.sg-txt textarea{min-height:120px}
/* variable chips = neutral badges with mono 12 */
.sg-vars{display:flex;flex-wrap:wrap;gap:6px}
.sg-vars .chip{height:20px;padding:0 6px;border:0;border-radius:var(--radius-xs);background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border);
  font:var(--t-mono);transition:box-shadow var(--dur-1),color var(--dur-1)}
.sg-vars .chip:hover{border-style:none;background:var(--badge-neutral-bg);color:var(--text-strong);box-shadow:inset 0 0 0 1px var(--border-strong)}
.sg-vars .chip:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}   /* the keyline turns accent, no second ring (DESIGN-CALM §3.9) */
.sg-tcount{display:flex;justify-content:space-between;gap:12px;margin-top:-4px;font:var(--t-caption);color:var(--text-3)}
.sg-tcount [data-warn]{display:flex;align-items:center;gap:4px;color:var(--danger)}
.sg-tcount [data-warn] .ic{width:12px;height:12px;flex:none;color:var(--danger)}   /* one hue per signal: glyph = text */
.sg-tcount .red{font-weight:600;color:var(--danger)}
.sg-btns{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* quick replies = pills */
.sg-qrc{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 4px 0 8px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);font:var(--t-caption-strong);color:var(--text-2)}
.sg-qrc > .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.sg-qrc button{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;color:var(--icon);transition:background var(--dur-1),color var(--dur-1)}
.sg-qrc button:hover{background:var(--surface-hover);color:var(--text-strong)}
.sg-qrc button .ic{width:12px;height:12px;stroke-width:2.4;color:inherit}
.sg-qradd{display:inline-flex;align-items:center;gap:8px}
.sg-qradd input{width:150px;height:24px;padding:0 8px;border:0;border-radius:var(--radius-s);background:var(--surface);box-shadow:0 0 0 1px var(--control-border);outline:0;
  font:var(--t-body);color:var(--text);transition:box-shadow var(--dur-1)}
.sg-qradd input:hover{box-shadow:0 0 0 1px var(--control-border-hover)}
.sg-qradd input:focus{box-shadow:var(--focus-ring)}
.sg-qradd input.err{box-shadow:0 0 0 1px var(--danger)}
.sg-qradd input.err:focus{box-shadow:0 0 0 1px var(--danger),inset 0 0 0 1px var(--danger)}
.sg-eda{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sg-used{margin-left:auto;font:var(--t-caption);color:var(--text-3)}
/* phone preview: framed surface (r24, --surface-offset, keyline), chat on --bg, the in-bubble (§5.27) */
.sg-pvw{display:grid;align-content:start;gap:16px;min-width:0;padding:16px;background:var(--bg)}
.sg-phone{padding:12px;border-radius:24px;background:var(--surface-offset);box-shadow:inset 0 0 0 1px var(--border)}
.sg-phh{display:flex;align-items:center;gap:8px;height:44px;padding:0 4px 8px}
.sg-phh > span:last-child{display:grid;min-width:0}
.sg-phh b{font:var(--t-body-strong);color:var(--text-strong)}
.sg-phh small{font:var(--t-caption);color:var(--text-3)}
.sg-chat{display:grid;align-content:start;gap:8px;min-height:240px;padding:12px;border-radius:var(--radius-l);background:var(--bg)}
.sg-day{justify-self:center;padding:2px 8px;border-radius:var(--radius-pill);background:var(--surface-offset);font:var(--t-caption-strong);color:var(--text-3)}
.sg-bub{justify-self:end;max-width:92%;padding:8px 12px 6px;border-radius:var(--radius-bubble);background:var(--bubble-in-bg);box-shadow:inset 0 0 0 1px var(--bubble-in-border)}
.sg-bub p{margin:0;font:var(--t-body);color:var(--text);white-space:pre-wrap;word-break:break-word}
.sg-meta{display:block;margin-top:2px;text-align:right;font:var(--t-caption);color:var(--text-3)}
.sg-var{text-decoration:underline dotted var(--text-3);text-underline-offset:3px}
.sg-var.bad{padding:0 4px;border-radius:var(--radius-xs);font-weight:600;background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border);text-decoration:none}
.sg-qrs{display:grid;justify-self:end;gap:4px;width:92%}
.sg-qr{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;border-radius:var(--radius-m);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);
  font:var(--t-body-strong);color:var(--text-2)}
.sg-qr .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.sg-pvn{margin:0;font:var(--t-caption);color:var(--text-3)}

/* ═════ ИИ-помощник ═════ */
/* 4 bordered metric cards (§5.14 metric card: padding 24 [S reports cards]), value 24/32 400 (§6.8) */
.sg-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:48px}
.sg-stat{display:grid;gap:0;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m)}
.sg-stat .lbl{font:var(--t-body);color:var(--text)}
.sg-stat b{margin-top:4px;font:var(--t-metric);color:var(--text-strong);font-variant-numeric:tabular-nums}
.sg-stat small{margin-top:4px;font:var(--t-caption);color:var(--text-3)}
select.sg-sel{width:auto;min-width:190px;height:var(--control-h);padding:0 26px 0 8px;border:0;border-radius:var(--radius-s);cursor:pointer;
  background:var(--surface) var(--select-chevron) no-repeat right 8px center/12px 12px;
  font:var(--t-body-strong);color:var(--text-strong);box-shadow:0 0 0 1px var(--control-border),var(--shadow-control)}
select.sg-sel:hover{box-shadow:0 0 0 1px var(--control-border-hover),var(--shadow-control)}
select.sg-sel:focus{box-shadow:var(--focus-ring),var(--shadow-control)}

/* rules = Stripe table */
.sg-rl{--rcols:36px minmax(0,1fr) 150px 116px 28px}
.sg-rlh,.sg-rr{display:grid;grid-template-columns:var(--rcols);align-items:center;column-gap:12px}
.sg-rlh{height:var(--row-h);padding:0 6px;box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 var(--border-soft)}
.sg-rlh .lbl{font:var(--t-caption-strong);color:var(--text-strong)}
.sg-rr{min-height:var(--row-h);padding:4px 6px;background:var(--surface);border-bottom:1px solid var(--border-soft);transition:background var(--dur-1)}
.sg-rr:last-child{border-bottom-color:var(--border)}
.sg-rr:hover{background:var(--surface-hover)}
.sg-rrt{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;min-width:0;padding:4px 0;border-radius:var(--radius-xs);font:var(--t-body);color:var(--text);text-align:left}
.sg-rrt .lbl{font:var(--t-body);color:var(--text-3)}
.sg-rrt b{font-weight:600;color:var(--text-strong)}
.sg-rrt b.red{color:var(--danger)}
.sg-rrt small{display:flex;align-items:center;gap:4px;flex-basis:100%;font:var(--t-caption);color:var(--text-3)}   /* the reason is neutral secondary text; the cue is the glyph only */
.sg-rrt small .ic{width:12px;height:12px;stroke-width:2.4;flex:none;color:var(--warning)}
.sg-rrt:hover > span:not(.lbl):not(.sg-arr),.sg-rrt:hover > b{text-decoration:underline dashed var(--text-4);text-underline-offset:3px}
.sg-rrt:focus-visible{box-shadow:var(--focus-ring)}
.sg-arr{font-weight:400;color:var(--text-3)}
/* an off or blocked rule stays operable (the text opens the editor), so it dims by colour, not opacity: every text drops to
   --text-3, which still holds 4.5:1 on the hovered row; the broken-stage red stays */
.sg-rr:is(.off,.blocked) .sg-rrt > :is(span,b:not(.red)),.sg-rr.off .sg-mode,.sg-rr.off .sg-hits{color:var(--text-3)}
/* mode «Делает сам / Предлагает»: a secondary .btn.sm with a trailing up-down icon */
.sg-mode{display:inline-flex;align-items:center;justify-self:start;gap:4px;height:24px;padding:0 8px;border:0;border-radius:var(--radius-s);cursor:pointer;white-space:nowrap;
  background:var(--btn-bg);font:var(--t-caption-strong);color:var(--btn-text);box-shadow:var(--shadow-control),0 0 0 1px var(--border);transition:box-shadow var(--dur-1),background var(--dur-1)}
.sg-mode .ic{width:12px;height:12px;stroke-width:2.4;flex:none;color:var(--text-3)}
.sg-mode:hover{box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong)}
.sg-mode:focus-visible{box-shadow:var(--shadow-control),var(--focus-ring)}
.sg-mode.suggest{box-shadow:none;border:1px dashed var(--border);padding:0 7px}
.sg-mode.suggest:hover{border-color:var(--border-strong);box-shadow:none}
.sg-mode.suggest:focus-visible{border-color:var(--focus-color);box-shadow:none}   /* the dashed keyline itself turns accent (DESIGN-CALM §3.9) */
.sg-mode.forced,.sg-mode.forced:hover{padding:0 8px;border:0;background:var(--surface-disabled);color:var(--text-3);box-shadow:0 0 0 1px var(--border-soft);cursor:default}
.sg-hits{font:var(--t-body);font-weight:600;color:var(--text-strong)}
.sg-hits small{font:var(--t-caption);color:var(--text-3)}

/* journal filter = filter pills (components .chip) */
.sg-filt{display:flex;flex-wrap:wrap;gap:6px}
.sg-filt .chip span{font-weight:400;color:var(--text-3)}
/* journal rows (not a timeline): time · icon tile · text · actions */
.sg-jr{border-top:1px solid var(--border)}
.sg-je{display:grid;grid-template-columns:56px 28px minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:56px;padding:8px 6px;border-bottom:1px solid var(--border-soft);transition:background var(--dur-1)}
.sg-je:hover{background:var(--surface-hover)}
.sg-jt,.sg-jt.lbl{font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums}
.sg-ji{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-s);background:var(--surface-offset);color:var(--icon)}
.sg-ji .ic{width:16px;height:16px}
.sg-je:hover .sg-ji{background:var(--surface-offset-hover)}
.sg-jx{display:grid;gap:0;min-width:0;font:var(--t-body);color:var(--text)}
.sg-jx b{overflow:hidden;font-weight:600;color:var(--text-strong);white-space:nowrap;text-overflow:ellipsis}
.sg-jx small{overflow:hidden;font:var(--t-caption);color:var(--text-3);white-space:nowrap;text-overflow:ellipsis}
.sg-ja{display:flex;align-items:center;gap:12px;white-space:nowrap}
.sg-je.undone .sg-jx b{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--text-3)}
.sg-je.undone .sg-ji{color:var(--text-disabled)}
.sg-ja .sg-none{display:inline-flex;align-items:center;gap:4px;font:var(--t-caption);cursor:default}
.sg-ja .sg-none .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.sg-ok{display:inline-flex;align-items:center;gap:4px;font:var(--t-caption-strong);color:var(--badge-success-text)}
.sg-ok .ic{width:12px;height:12px;stroke-width:2.4;color:var(--success)}
.sg-why{display:grid;place-items:center;color:var(--icon)}
.sg-why .ic{width:12px;height:12px;stroke-width:2.4}
.sg-rls > .empty,.sg-jr > .empty{margin:40px auto}

/* ═════ Команда ═════ */
/* no toolbar sits between the tabs and the table, so the tab baseline is the table's top rule [S team] */
.sg-tabs{position:relative;display:flex;gap:24px;box-shadow:inset 0 -1px 0 var(--border)}
.sg-tabs + .sg-tm > .sg-mh{box-shadow:inset 0 -1px 0 var(--border-soft)}
.sg-tabs + .sg-tm > .sg-ir:first-child{border-top:0}
.sg-tabs button{position:relative;padding:0 0 8px;font:var(--t-body-strong);color:var(--text-2);white-space:nowrap;transition:color var(--dur-1)}
.sg-tabs button span{margin-left:2px;font-weight:400;color:var(--text-3)}
.sg-tabs button:hover{color:var(--text-strong)}
.sg-tabs button.on{color:var(--text-strong)}   /* tab recipe (DESIGN-CALM §3.2) */
.sg-tabs button:focus-visible{border-radius:var(--radius-xs);outline:var(--focus-outline);outline-offset:2px;box-shadow:none}   /* as .sg-ni */
.sg-ul{position:absolute;bottom:0;left:0;width:0;height:2px;border-radius:1px;background:var(--tab-ink);transition:transform var(--dur-3) var(--ease-out),width var(--dur-3) var(--ease-out)}
.sg-ul.no-anim{transition:none}
/* members = Stripe table [S team]: 36 px header, 64 px rows */
.sg-tm{--mcols:minmax(220px,1.3fr) 150px 116px minmax(220px,1.2fr) 28px}
.sg-mh,.sg-mr{display:grid;grid-template-columns:var(--mcols);align-items:center;column-gap:16px}
.sg-mh{height:var(--row-h);padding:0 6px;box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 var(--border-soft)}
.sg-mh .lbl{font:var(--t-caption-strong);color:var(--text-strong)}
.sg-mr{min-height:64px;padding:8px 6px;background:var(--surface);border-bottom:1px solid var(--border-soft);transition:background var(--dur-1)}
.sg-mr:last-child{border-bottom-color:var(--border)}
.sg-mr:hover{background:var(--surface-hover)}
/* a suspended member stays editable, so the row dims by colour, not opacity: texts drop to --text-3 (≥ 4.5:1 on the hovered
   row) and the avatar takes the neutral palette */
.sg-mr.susp .sg-who .av{--av-bg:var(--av-6-bg);--av-text:var(--av-6-text)}
.sg-mr.susp :is(.sg-who b,.sg-role,.sg-l1,.sg-l1 b,.sg-l2 .sg-sig){color:var(--text-3)}
.sg-who{display:flex;align-items:center;gap:12px;min-width:0}
.sg-who .av{width:32px;height:32px;font-size:12px}
.sg-who > span:last-child{display:grid;min-width:0}
.sg-who b{display:flex;align-items:center;gap:8px;font:var(--t-body-medium);color:var(--text-strong)}
.sg-who small{overflow:hidden;font:var(--t-body);color:var(--text-3);white-space:nowrap;text-overflow:ellipsis}
.sg-avp .ic{width:16px;height:16px;stroke-width:2}
/* role picker = secondary .btn.sm with up-down */
.sg-role{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:0;border-radius:var(--radius-s);cursor:pointer;white-space:nowrap;
  background:var(--btn-bg);font:var(--t-caption-strong);color:var(--btn-text);box-shadow:var(--shadow-control),0 0 0 1px var(--border);transition:box-shadow var(--dur-1)}
.sg-role:hover,.sg-role[aria-expanded="true"]{box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong)}
.sg-role:focus-visible{box-shadow:var(--shadow-control),var(--focus-ring)}
.sg-role .ic{width:12px;height:12px;stroke-width:2.4;color:var(--text-3)}
/* channel access toggles: 28×28 secondary icon buttons; on = a pressed grey button with a dark icon (DESIGN-CALM §3.3 / §4 G8) */
.sg-chans{display:flex;gap:8px}
.sg-cc{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:var(--radius-s);background:var(--btn-bg);color:var(--icon);
  box-shadow:var(--shadow-control),0 0 0 1px var(--border);transition:box-shadow var(--dur-1),color var(--dur-1)}
.sg-cc .ic{width:16px;height:16px;stroke-width:2}
.sg-cc:hover{color:var(--text-strong);box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong)}
.sg-cc.on{color:var(--text-strong);background:var(--surface-pressed);box-shadow:0 0 0 1px var(--border-strong)}
.sg-cc.on:hover{box-shadow:0 0 0 1px var(--control-border-hover)}
.sg-cc:focus-visible{box-shadow:var(--shadow-control),var(--focus-ring)}
.sg-cc.on:focus-visible{box-shadow:var(--focus-ring)}
.sg-cc[disabled]{opacity:.5;cursor:default}
.sg-load{display:grid;gap:4px;min-width:0;font:var(--t-body);color:var(--text)}
.sg-l1 b{font-weight:600;color:var(--text-strong)}
.sg-lbar{display:block;max-width:220px;height:4px;border-radius:2px;background:var(--border-soft);overflow:hidden}
.sg-lbar i{display:block;height:100%;border-radius:2px;background:var(--meter);transition:width var(--dur-4) var(--ease-out)}
.sg-l2{font:var(--t-caption);color:var(--text-3)}
/* overdue / waiting repeat on every member row, so they are neutral text after a 6 px status dot, the colour only in the dot
   (DESIGN-CALM §1.6, §3.7 [S contacts-status]; the reports KPI dot recipe) */
.sg-l2 .sg-sig{color:var(--text-2)}
.sg-l2 .sg-sig::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;vertical-align:1px;background:var(--dot-red)}
.sg-l2 .sg-sig.wait::before{background:var(--dot-orange)}
/* invites: grey avatar + badge */
.sg-ir{display:flex;align-items:center;gap:16px;min-height:64px;padding:8px 6px;border-bottom:1px solid var(--border-soft);transition:background var(--dur-1)}
.sg-ir:first-child{border-top:1px solid var(--border)}
.sg-ir:last-child{border-bottom-color:var(--border)}
.sg-ir:hover{background:var(--surface-hover)}
.sg-ir .sg-who{flex:1}
.sg-ir .sg-stt{background:var(--badge-info-bg);color:var(--badge-info-text);box-shadow:inset 0 0 0 1px var(--badge-info-border)}
.sg-ir .sg-stt i{display:none}
.sg-ira{display:flex;gap:8px}
.sg-tm > .empty{margin:40px auto}

/* ═════ Демо-данные ═════ */
.sg-dm{display:grid;gap:16px}
.sg-card{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m)}
.sg-card h3{margin:0 0 4px;font:var(--t-heading-s);color:var(--text-strong)}
.sg-card p{max-width:660px;margin:0;font:var(--t-body);color:var(--text-3)}
.sg-card p b{font-weight:600;color:var(--text-strong)}
/* the danger row = a plain card with the secondary .btn.ol, like Attio's «Danger zone» [S settings-general fdf5ad8e: no tint,
   neutral button]. Red stays in the button's glyph and in the confirm dialog's destructive «Сбросить» (UI.confirm danger) */
.sg-danger{display:flex;align-items:center;justify-content:space-between;gap:20px}
.sg-danger .btn{flex:none}
.sg-cardh{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.sg-carda{display:flex;flex:none;gap:8px}
/* data-model table = Stripe table */
.sg-dt{width:100%;border-collapse:collapse;font:var(--t-body);color:var(--text-2)}
.sg-dt th{height:var(--row-h);padding:0 6px;text-align:left;white-space:nowrap;box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 var(--border-soft)}
.sg-dt th.lbl{font:var(--t-caption-strong);color:var(--text-strong)}
.sg-dt td{height:var(--row-h);padding:0 6px;border-bottom:1px solid var(--border-soft)}
.sg-dt tbody tr:last-child td{border-bottom-color:var(--border)}
.sg-dt th:last-child,.sg-dt td:last-child{text-align:right}
.sg-dt td:last-child{font-weight:600;color:var(--text-strong)}
.sg-dt tbody tr:hover td{background:var(--surface-hover)}
.sg-dt code{font:var(--t-mono);color:var(--text)}

/* ── narrower #view (container queries on view, §4.6) ── */
@container view (max-width:1120px){
  .sg-tp{grid-template-columns:270px minmax(0,1fr)}
  .sg-ed{border-right:0}
  .sg-pvw{grid-column:2;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start;column-gap:16px;border-top:1px solid var(--border-soft)}
  .sg-pvw .sg-phone{grid-row:span 2}
}
@container view (max-width:920px){
  .sg-h{flex-wrap:wrap}
  .sg-chb{grid-template-columns:minmax(0,1fr)}
  .sg-chb,.sg-chp,.sg-log,.sg-mbs{padding-left:16px}
  .sg-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-tbl,.sg-tm,.sg-rl{overflow-x:auto}
  .sg-th,.sg-rows{min-width:840px}
  .sg-mh,.sg-mr{min-width:760px}
  .sg-tp{grid-template-columns:minmax(0,1fr)}
  .sg-tpl{max-height:260px;border-right:0;border-bottom:1px solid var(--border-soft)}
  .sg-pvw{grid-column:auto;grid-template-columns:minmax(0,1fr)}
  .sg-lg{grid-template-columns:96px 110px minmax(0,1fr)}
  .sg-lg .sg-lgx{display:none}
}

@media (prefers-reduced-motion: reduce){
  .sg-mark,.sg-ul,.sg-remin,.sg-okm,.sg-pbar i,.sg-lbar i{transition:none!important}
  .sg-rows.is-dragging .sg-row:not(.lift){transition:none!important}
  .sg-okm{transform:none!important}
  .sg-saved.on .ic{animation:none}
  .btn.sg-busy::before{animation-duration:2s}
}

/* «Команды в поле ответа»: the decks of /презентации */
.sg-decks{display:flex;flex-direction:column;gap:4px;max-width:720px}
.sg-deck{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 10px;border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px var(--border-soft);font:var(--t-body);color:var(--text)}
.sg-deck .ic{width:16px;height:16px;flex:none;color:var(--icon)}
.sg-deck .fn{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sg-deck a{margin-left:auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-caption)}
.sg-deck a:hover{color:var(--text-strong);text-decoration:underline}
.sg-cmd .sg-txt{display:block;max-width:720px;margin-top:8px}
.sg-cmd .sg-txt .lbl{display:block;margin-bottom:4px;color:var(--text-2)}
.sg-cmd .sg-txt textarea{min-height:0}

/* «Мои быстрые ответы» (CRM.quick, DESIGN-CALM §24): name over a one-line text, uses, × */
.sg-qk{display:grid;box-shadow:inset 0 1px 0 var(--border-soft)}
.sg-qr{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--border-soft)}
.sg-qt{flex:1;min-width:0;display:grid;gap:2px;padding:4px 8px;border-radius:var(--radius-s);text-align:left;font:var(--t-body);color:var(--text)}
.sg-qt:hover{background:var(--surface-hover)}
.sg-qt b{font-weight:600;color:var(--text-strong)}
.sg-qt span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-caption);color:var(--text-3)}
.sg-qu{flex:none;font:var(--t-caption);color:var(--text-3)}
.sg-qe{margin:8px 0 0;font:var(--t-caption);color:var(--text-3)}