/* ===== v90 · settings (2 Oct 2026, Builder S2) — the settings kit for Project settings, Workspace settings and My account
   (_research/2026-10-home-settings/01-research.md §8; brief HS5). A settings nav inside the page; a head with the tab's purpose and "Used by";
   cards with rows on the app's 150px label grid (130 under 1320); controls sized by their content; a footer only while a text card changed;
   sheets for multi-field forms and confirmations. Tokens only (type, radius, colour), so light and dark follow. Kept in its own file while
   other builders append to linear.css. ===== */

/* ---------- the page: nav + one column ---------- */
.page.stg{padding:22px var(--page-x,32px) 96px}
.stg-wrap{display:grid;grid-template-columns:200px minmax(0,760px);column-gap:44px;align-items:start}
.stg.is-wide .stg-wrap{grid-template-columns:200px minmax(0,1080px)}
.stg-main{min-width:0;display:flex;flex-direction:column;gap:20px}

/* the settings nav: 30px rows, quiet; the open tab carries the contrast */
.stg-nav{position:sticky;top:calc(var(--top-h) + 18px);display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - var(--top-h) - 36px);overflow-y:auto;scrollbar-width:thin;padding:2px 2px 16px}
.stg-who{display:flex;align-items:center;gap:10px;padding:0 8px 2px;min-width:0}
.stg-who-t{display:flex;flex-direction:column;min-width:0}
.stg-who-t b{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stg-who-t span{font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3)}
.stg-logo.is-lg{width:28px;height:28px;border-radius:var(--r-8);font-size:var(--t-body)}
.stg-ng{display:flex;flex-direction:column;gap:1px}
.stg-ngl{padding:0 8px 4px;font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-medium);color:var(--fg-3)}
.stg-ni{position:relative;display:flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 10px;border-radius:var(--r-8);font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg-2);white-space:nowrap;transition:var(--tr-ui)}
.stg-ni svg{flex:none;color:var(--fg-3)}
.stg-ni span{overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.stg-ni:hover{background:var(--hover);color:var(--fg)}}
.stg-ni.is-on{background:var(--selected);color:var(--fg)}   /* D14: the sidebar's selected state — fill, ink and the edge mark */
.stg-ni.is-on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--text-1)}
.stg-ni.is-on svg{color:var(--fg)}

/* ---------- the head: title, one line, "Used by" ---------- */
.stg-head .pl-hd{margin:2px 0 10px}
.stg-used{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.stg-used-l{font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-3);margin-right:2px}
.stg-uc{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--r-full);background:var(--bg-3);font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-2);white-space:nowrap;transition:var(--tr-ui)}
@media (hover:hover){a.stg-uc:hover{background:var(--bg-5);color:var(--fg)}}
.stg-uc.is-text{background:transparent;box-shadow:inset 0 0 0 1px var(--bd);color:var(--fg-3)}
.stg-uc.is-sm{height:20px;padding:0 8px;font-size:var(--t-sh);line-height:var(--lh-sh)}
.stg-uc.is-warn{background:var(--st-orange-bg);color:var(--st-orange-fg)}
.stg-ucs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}
.stg-ucs.is-sheet{gap:6px}
/* fixer r1: chips + a paused alert's reason on its own line under them */
.stg-ucw{display:flex;flex-direction:column;gap:8px;min-width:0}
.stg-ucw-n{display:flex;align-items:flex-start;gap:6px;max-width:none}
.stg-ucw-n > svg{flex:none;margin-top:2px;color:var(--st-orange-fg)}
.stg-ucw-n b{font-weight:var(--w-medium);color:var(--fg-2)}
.stg-more-n{font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);font-variant-numeric:tabular-nums}

/* ---------- cards and rows ---------- */
.stg-card.sec{margin-top:0;padding:22px}
.stg-card .sec-hd{margin-bottom:6px}
/* v90 fix (SF8): the header rule runs where the table rules run (card + 15), as on the Website pages (W8) */
.stg-card > .sec-hd{margin:0 -8px 6px;padding:0 8px}
.stg-card .sec-hd .n{white-space:normal;min-width:0;text-wrap:pretty}
.stg-card .sec-hd .grow{flex:1}
.stg-rows{display:flex;flex-direction:column}
/* v90 fix (SF9 · SF14): the label and its help sit in one fixed column; every control of a card starts on the same x, left-aligned (spec §8.3).
   A wide row (lists, tags, checklists, long text) puts its control under the label, across the card */
.stg-row{display:grid;grid-template-columns:var(--stg-lc,248px) minmax(0,1fr);column-gap:28px;align-items:start;min-height:52px;padding:10px 0}
.stg-row > .stg-l{padding-top:9px}   /* D10: the label's first line centres on a 38px control */
.stg-row.is-wide{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:12px 0}
.stg-row.is-wide > .stg-l{padding-top:0}
.stg-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.stg-lb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg);text-wrap:pretty}
.stg-help{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);max-width:62ch;text-wrap:pretty}
.stg-c{display:flex;flex-direction:column;gap:8px;min-width:0}
.stg-ctl{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px 12px;min-width:0;min-height:var(--h-in)}
.stg-row.is-wide .stg-ctl{max-width:none}
.stg-ctl > *{min-width:0}

/* the footer of a text card shows only while it differs from what is saved */
.stg-ft{display:none;align-items:center;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--ln-2)}
.stg-card.is-dirty .stg-ft{display:flex}
.stg-ftn{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.stg-card.is-dirty{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),var(--sh-tiny)}

/* ---------- controls ---------- */
.stg-in{height:var(--h-in);padding:0 12px;border-radius:var(--r-ctl);border:1px solid var(--line-ctl);background:var(--bg);font:inherit;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg);transition:var(--tr-ui)}   /* Oct 7 review (D14): no "outline:none" — it hid the one focus ring on every settings field */
.stg-in::placeholder{color:var(--fg-4)}
@media (hover:hover){.stg-in:hover{border-color:var(--line-ctl-h)}}
.stg-in:focus{border-color:var(--line-ctl-h)}   /* v103 (AX4): the field takes the one ring (linear.css :focus-visible), not a 22% halo */
.stg-in.w-short{width:320px}.stg-in.w-long{width:440px}.stg-in.w-num{width:120px;font-variant-numeric:tabular-nums}.stg-in.w-tiny{width:64px;text-align:center}.stg-in.w-full{width:100%}
.stg-ta{height:auto;min-height:56px;width:100%;max-width:520px;padding:8px 12px;border-radius:var(--r-ctl);resize:vertical;display:block}
.stg-field{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.stg-field.is-area{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;max-width:520px}
.stg-pre,.stg-suf{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-3)}
.stg-count{align-self:flex-end;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-4);font-variant-numeric:tabular-nums}
.stg-sel{min-width:200px;max-width:340px;justify-content:space-between}
/* D07/D10: a settings select is a field — the surface, the control edge, 8px; 38px tall in a settings row */
.prop.stg-sel{border:1px solid var(--line-ctl);background:var(--bg);box-shadow:none;color:var(--fg)}
@media (hover:hover){.prop.stg-sel:hover{border-color:var(--line-ctl-h);background:var(--bg)}}
.stg-ctl > .stg-sel,.stg-ctl > .stg-field > .stg-sel{height:var(--h-in)}
.stg-sel .mb-l{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;text-align:left}

/* a switch — v90 fix (SF12): the look is the app's one toggle (linear.css .tgl: 30 × 18, the accent when on, a neutral track when off) */
.stg-tg{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;flex:none}
.stg-tg input{position:absolute;opacity:0;margin:0;cursor:pointer;width:34px;height:24px;left:auto;right:-2px;top:50%;margin-top:-12px}
.stg-tg.is-off{opacity:.45;cursor:default}
.stg-tg-t{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}

/* radio rows — a choice with a line saying what it means */
.stg-radios{display:flex;flex-direction:column;gap:6px;width:100%;max-width:520px}
.stg-rd{position:relative;display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:10px;align-items:start;padding:10px 12px;border-radius:var(--r-12);box-shadow:inset 0 0 0 1px var(--bd);cursor:pointer;transition:var(--tr-ui)}
@media (hover:hover){.stg-rd:hover{background:var(--hover-solid)}}
.stg-rd.is-on{box-shadow:inset 0 0 0 1.5px var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--bg))}
.stg-rd input{position:absolute;opacity:0;pointer-events:none}
.stg-rd-c{width:16px;height:16px;margin-top:1px;border-radius:var(--r-full);box-shadow:inset 0 0 0 1.5px var(--bd-3);background:var(--bg)}
.stg-rd.is-on .stg-rd-c{box-shadow:inset 0 0 0 5px var(--accent)}
.stg-rd input:focus-visible ~ .stg-rd-c{outline:2px solid var(--ring);outline-offset:2px}
.stg-rd-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.stg-rd-t b{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg)}
.stg-rd-t span{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}

/* checklists */
.stg-checks{display:flex;flex-direction:column;gap:10px;min-width:0}
.stg-checks.is-row{flex-direction:row;gap:20px;flex-wrap:wrap}
.stg-checks.is-wrap{gap:10px 18px}
.stg-ck{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg)}
.stg-ck input{position:absolute;opacity:0;cursor:pointer}
.stg-ck-b{flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:1px;border-radius:var(--r-4);box-shadow:inset 0 0 0 1.5px var(--bd-3);background:var(--bg);color:transparent;transition:var(--tr-ui)}
.stg-ck input:checked+.stg-ck-b{background:var(--accent);box-shadow:none;color:var(--on-fill)}
.stg-ck input:focus-visible+.stg-ck-b{outline:2px solid var(--ring);outline-offset:2px}
.stg-ck.is-off{cursor:default;color:var(--fg-3)}
.stg-ck.is-off .stg-ck-b{opacity:.5}
.stg-ck > svg,.stg-ck .stg-ailogo,.stg-ck .stg-av{flex:none;margin-top:1px;color:var(--fg-3)}
.stg-ck-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.stg-ck-n{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.stg-ailogo{display:grid;place-items:center;width:16px;height:16px}

/* tags */
.stg-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;max-width:520px;min-height:36px;padding:5px 6px;border-radius:var(--r-12);box-shadow:inset 0 0 0 1px var(--bd-2);background:var(--bg);transition:var(--tr-ui)}
.stg-tags:focus-within{outline:2px solid var(--ring);outline-offset:2px}   /* v103 (AX4): the one ring */
.stg-tag{display:inline-flex;align-items:center;gap:2px;padding:0 4px 0 10px;border-radius:var(--r-full);background:var(--bg-3);font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg);max-width:100%;height:auto;min-height:24px}
.stg-tag > span{overflow-wrap:anywhere;padding:3px 0}
.stg-tag button{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--r-full);color:var(--fg-3)}
@media (hover:hover){.stg-tag button:hover{background:var(--bg-5);color:var(--fg)}}
.stg-tag-in{flex:1 1 140px;min-width:120px;height:24px;padding:0 6px;border:0;background:none;outline:none;font:inherit;font-size:var(--t-body);color:var(--fg)}
.stg-tag-in::placeholder{color:var(--fg-4)}

/* read-only values, links, buttons */
.stg-ro{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);flex-wrap:wrap}
.stg-ro > span:first-child{min-width:0;overflow-wrap:anywhere;text-wrap:pretty}
.stg-ro.is-mono > span:first-child{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:var(--t-co)}
.stg-copy{width:26px;height:26px;border-radius:var(--r-full)}
.stg-a{color:var(--link);font-weight:var(--w-medium);white-space:nowrap;border-radius:var(--r-4)}
@media (hover:hover){.stg-a:hover{text-decoration:underline;text-underline-offset:2px}}
.stg-a > span{display:inline-flex;align-items:center;gap:4px}
.stg-goto{display:inline-flex;align-items:center;gap:6px 12px;flex-wrap:wrap;justify-content:flex-start;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);min-width:0}
.stg-golink > span{gap:2px}
/* v90 fix (SF13): red words at 4.5:1 or better on their button, in both themes; the Delete button keeps white text at 5:1 in dark too */
.stg-btn.stg-red{color:var(--neg-ink)}
.stg-btn.stg-red svg{color:currentColor}
.stg-btn.stg-danger{background:var(--danger-fill);border-color:transparent;color:var(--on-fill)}
@media (hover:hover){.stg-btn.stg-danger:hover{background:var(--danger-fill-h)}}
.stg-btn.stg-danger:disabled{opacity:.45}
.stg-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}   /* night C1: honestly off (its reason in the title and under the table) — still focusable */
.stg-muted{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.stg-inline{display:inline-flex;align-items:center;gap:12px;min-width:0}
.stg-inline.is-wrap{flex-wrap:wrap;gap:6px;justify-content:flex-start}
.stg-stack{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;width:100%}
.stg-chip{height:22px}
.stg-more{width:28px;height:28px;border-radius:var(--r-full)}
.stg-av{flex:none}
.stg-lock{display:inline-grid;color:var(--fg-4)}
.stg-dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:var(--r-full)}
.stg-flag{font-size:var(--t-t3);line-height:var(--lh-t3);flex:none}
.stg-tip{border-bottom:1px dotted var(--fg-4);cursor:help;color:var(--fg-2)}

/* swatches */
.stg-sws{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.stg-sws .stg-logo{margin-right:6px}
.stg-sw{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-full);color:var(--on-fill);transition:var(--tr-ui);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 40%,transparent)}   /* fixer r1 (1.4.11): a hairline edge, so the navy swatch is never an empty slot on a dark card */
@media (hover:hover){.stg-sw:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 40%,transparent),0 0 0 2px var(--bg),0 0 0 4px var(--line-ctl-h)}}   /* I: hover rings the swatch — it no longer grows (a hover never changes a size) */
.stg-sw.is-on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 40%,transparent),0 0 0 2px var(--bg),0 0 0 4px var(--fg-3)}

/* lists inside a card */
.stg-list{display:flex;flex-direction:column;width:100%;min-width:0}
.stg-li{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 0;min-width:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.stg-li + .stg-li{border-top:1px solid var(--ln-3)}
.stg-li-n{flex:1;min-width:0;color:var(--fg);overflow-wrap:anywhere;text-wrap:pretty}
.stg-li-n b{font-weight:var(--w-medium)}
.stg-li-n span{color:var(--fg-3)}
.stg-li-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.stg-li-t b{font-weight:var(--w-medium);color:var(--fg);overflow-wrap:anywhere;text-wrap:pretty}
.stg-li-t span{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
/* night P6 (S3): allowed domains — the field, its refusal, and a listed domain the check would refuse today; Members › Join requests */
.stg-doms{display:flex;flex-direction:column;gap:8px;min-width:0}
.stg-domw{display:flex;flex-direction:column;gap:6px}
.stg-domw-r{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 12px}
.stg-domw-r .stg-warn{flex:1 1 280px;min-width:0}
.stg-domw-r .stg-btn{flex:none}
.stg-jr-b{display:inline-flex;flex:none;gap:8px}
@media (max-width:600px){ .stg-li.is-row{flex-wrap:wrap} .stg-li.is-row > .stg-li-t{flex:1 1 100%} }   /* night P6 (S3): on a phone the buttons go under the words */
/* night P6 (S4): two-step sign-in — numbered steps, the recovery codes block, and your own status when the workspace requires it */
ol.stg-ul.is-num{list-style:decimal}
.stg-ul.is-num li::marker{color:var(--fg-3)}
.stg-rc-step{margin-top:4px}
.stg-rc-step b{font-weight:var(--w-medium);color:var(--fg)}
.stg-rc{display:flex;flex-direction:column;gap:10px;margin-left:18px}
.stg-rc-codes{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:6px 32px;margin:0;padding:12px 16px;list-style:none;border:1px solid var(--ln-2);border-radius:var(--r-ctl);background:var(--bg-2);font-family:var(--mono);font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg);font-variant-numeric:tabular-nums;user-select:all}
.stg-rc-b{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.stg-rc-p{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
/* night P6 (S9): the Audit log by time — search, range, a day header that stays in view (the card clips instead of hiding overflow, so sticky works), the count */
.stg-audit-card{overflow:clip}
.stg-af-q,.stg-af-dr .stg-in{height:30px}
.stg-af-q{width:240px;max-width:100%}
.stg-af-dr{gap:8px}
.stg-af-dr .stg-in{width:156px}
.stg-dayh{position:sticky;top:var(--top-h);z-index:1;padding:12px 0 6px;border-bottom:1px solid var(--ln-2);background:var(--lvl-0)}
.stg-dayh > span{display:flex;align-items:baseline;gap:8px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.stg-dayh b{font-weight:var(--w-semibold);color:var(--fg)}
.stg-af-n{margin:10px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
/* night P6 (S5): two-step adoption under the switch; a member's status chips */
.stg-tgcol{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.stg-tgcol > .stg-tg{min-height:var(--h-in)}
.stg-2fa-line{font-size:var(--t-co);line-height:var(--lh-co)}
.stg-chips{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.stg-2fa-due{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:520px}
.stg-2fa{flex-wrap:wrap;gap:8px}
.stg-li.is-src{align-items:flex-start;padding:10px 0}
.stg-li.is-src .btn{margin-top:2px}
.stg-li.is-link{margin:0 -8px;padding:6px 8px;border-radius:var(--r-8);transition:var(--tr-ui)}
@media (hover:hover){.stg-li.is-link:hover{background:var(--hover-solid)}}
.stg-li.is-link > svg{color:var(--fg-4);flex:none}
.stg-li-a{font-size:var(--t-co)}
.stg-list.is-rows{margin-bottom:6px}
.stg-oneline{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-3)}
.stg-oneline svg{flex:none;color:var(--fg-4)}
.stg-oneline > span{flex:1 1 0;min-width:0}   /* fixer r1: the sentence stays beside its icon at 390 */
.stg-foot{margin:8px 0 2px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.stg-foot > svg{display:inline-block;vertical-align:-2px;margin-right:5px}   /* fixer r1: a footnote's icon leads its line (svg is display:block globally) */
.stg-foot .stg-a{font-size:var(--t-co)}
.stg-p{margin:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);text-wrap:pretty}
.stg-p.is-muted{color:var(--fg-3)}
.stg-ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);list-style:disc}
.stg-ul.is-tight{gap:2px;font-size:var(--t-co);line-height:var(--lh-co)}

/* tables (the app's .tbl grammar) */
.stg-tbl{margin-top:2px}
.stg-tbl .tbl-r{min-height:48px;align-items:start}
.stg-tbl .tbl-r > span{min-width:0;padding-top:12px;padding-bottom:12px}
.stg-tbl .u.is-mono{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:var(--t-sh)}
.stg-tbl .stg-act{display:flex;justify-content:flex-end}
.stg-tbl .tbl-r.is-attn{background:color-mix(in srgb,var(--c-orange) 5%,transparent)}
@media (hover:hover){.stg-tbl .tbl-r.is-attn:hover{background:color-mix(in srgb,var(--c-orange) 9%,transparent)}}
.stg-tbl .tbl-r.is-dim .k,.stg-tbl .tbl-r.is-dim .u{color:var(--fg-3)}
.stg-tbl .stg-sel{min-width:0;width:100%;max-width:200px}
.stg-src{display:flex;gap:10px;min-width:0}
.stg-src-ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-8);background:var(--bg-3);color:var(--fg-2)}
.stg-note{white-space:normal;overflow:visible;text-overflow:clip}
.stg-person{display:flex;gap:10px;min-width:0}
.stg-aptbl .tbl-r{min-height:56px}

/* fixed rule, banners, two columns, charts */
.stg-fixed{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--r-12);background:var(--lvl-0);box-shadow:inset 0 0 0 1px var(--bd);font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.stg-fixed svg{flex:none;margin-top:1px;color:var(--c-green)}
.stg-fixed b{font-weight:var(--w-semibold);color:var(--fg)}
.stg-banner{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-radius:var(--r-12);background:var(--st-orange-bg);font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.stg-banner > svg{flex:none;color:var(--warn)}
.stg-banner b{font-weight:var(--w-semibold);color:var(--fg)}
.stg-err{display:flex;align-items:flex-start;gap:8px;padding:8px 0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.stg-err svg{flex:none;margin-top:2px;color:var(--warn)}
.stg-acts{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 4px}
.stg-two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
.stg-chart{padding-top:6px}
.stg-back{margin-bottom:-8px}
.stg-back .stg-a{color:var(--fg-3);font-weight:var(--w-medium)}
@media (hover:hover){.stg-back .stg-a:hover{color:var(--fg);text-decoration:none}}

/* alert rules */
.stg-rules{display:flex;flex-direction:column}
.stg-rule + .stg-rule{border-top:1px solid var(--ln-3)}
.stg-rule-t{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg)}
.stg-rule.is-off .stg-rule-t > span:first-child{color:var(--fg-3)}
.stg-rule-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px}

/* the danger zone: calm — no red frame; the consequence is said, the button carries the colour */
.stg-dz .sec-hd h2{color:var(--fg)}

/* ---------- sheets ---------- */
.stg-ov{position:fixed;inset:0;z-index:700;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:var(--scrim);animation:stg-fade var(--dur-2) var(--ease-out)}
.stg-sheet{width:min(480px,100%);max-height:76vh;display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--elev);box-shadow:var(--sh-high),inset 0 0 0 1px var(--bd-tl);animation:stg-rise var(--dur-3) var(--ease-out)}
.stg-sheet.is-md{width:min(580px,100%)}
@keyframes stg-fade{from{opacity:0}}
@keyframes stg-rise{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.stg-ov,.stg-sheet{animation:none}}
.stg-sh-hd{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 6px 22px}
.stg-sh-hd h2{margin:0;font-size:var(--t-t3);line-height:var(--lh-t3);font-weight:var(--w-semibold);letter-spacing:var(--ls-t3);color:var(--fg)}
.stg-sh-hd p{margin:4px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.stg-sh-x{width:28px;height:28px;border-radius:var(--r-full);margin-top:-4px}
.stg-sh-bd{display:flex;flex-direction:column;gap:14px;padding:10px 22px 14px;overflow-y:auto;min-height:0}
.stg-sh-ft{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--ln-3)}
.stg-sf{display:flex;flex-direction:column;gap:6px;min-width:0}
.stg-sf-l{font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-2)}
.stg-sf-h{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.stg-sf-row{display:flex;flex-wrap:wrap;gap:12px}
.stg-sf-row .stg-sel{min-width:150px}
.stg-preview{display:flex;align-items:center;gap:8px;margin:0;padding:9px 12px;border-radius:var(--r-12);background:var(--bg-3);font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg)}
.stg-preview svg{flex:none;color:var(--fg-3)}

/* ---------- widths ---------- */
/* v90 fix (SF11): at 1320px and narrower the settings nav is a row of tabs over the page (the app's sidebar stays) — the content starts where
   every other page starts, 216px further left than the old second column put it at 1280 */
.stg-navm{display:none;flex-direction:column;gap:6px;margin:-2px 0 20px;min-width:0}
.stg-ctx{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.stg-ctx .stg-logo{width:18px;height:18px;border-radius:var(--r-4);font-size:10px}
.stg-ctx b{font-weight:var(--w-medium);color:var(--fg-2)}
.stg-strip{display:flex;align-items:flex-end;gap:16px;min-width:0;box-shadow:inset 0 -1px 0 var(--ln)}
.stg-strip-l{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;column-gap:20px;height:40px;overflow:hidden}
@media (hover:hover){.stg-st:hover{color:var(--fg);box-shadow:inset 0 -2px 0 var(--ln)}}
.stg-st.is-on{color:var(--fg);box-shadow:inset 0 -2px 0 var(--fg)}
.stg-strip-m{flex:none;display:flex;align-items:center;height:40px}
.stg-strip-m.is-none{display:none}
.stg-strip-m .menu-btn{height:30px}
.stg-strip-m.is-cur .menu-btn{color:var(--fg);box-shadow:inset 0 -2px 0 var(--fg);border-radius:0}
/* night P6 (S14): on a phone the partial tab row goes — one full-width menu names the open tab and lists every tab, by area */
@media (max-width:600px){
  .stg-strip{box-shadow:none}
  .stg-strip-l{display:none}
  .stg-strip-m,.stg-strip-m.is-none{display:flex;flex:1 1 auto;height:auto;min-width:0}
  .stg-strip-m .menu-btn{flex:1 1 auto;min-width:0;height:var(--h-in)}
  .stg-strip-m .menu-btn .mb-l{flex:1 1 auto;min-width:0;max-width:none;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stg-strip-m.is-cur .menu-btn{box-shadow:none;border-radius:var(--r-ctl)}
}
@media (max-width:1320px){
  .stg-wrap,.stg.is-wide .stg-wrap{grid-template-columns:minmax(0,760px);column-gap:0}
  .stg.is-wide .stg-wrap{grid-template-columns:minmax(0,1080px)}
  .stg-nav{display:none}
  .stg-navm{display:flex}
  .stg-row{--stg-lc:232px;column-gap:24px}
}
@media (max-width:1100px){
  .page.stg{padding:20px 24px 80px}
  .stg-row{--stg-lc:200px;column-gap:20px}
  .stg-in.w-short{width:260px}.stg-in.w-long{width:320px}
  .stg-two{grid-template-columns:minmax(0,1fr)}
}
/* 900px: a row puts its label above the control; cards keep 22px on every side (SF8) */
@media (max-width:900px){
  .page.stg{padding:16px 16px 72px}
  .stg-row,.stg-row.is-wide{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:10px 0}
  .stg-row > .stg-l{padding-top:0}
  .stg-in.w-short,.stg-in.w-long{width:100%;max-width:440px}
  .stg-card .sec-hd{flex-wrap:wrap}
}

/* ---------- workspace and account extras ---------- */
.stg-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 6px}
.stg-filters .stg-sel{min-width:150px}
.stg-yes{display:inline-grid;place-items:center;color:var(--pos)}
.stg-no{color:var(--fg-4)}
.stg-part{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.stg-roles .tbl-r{min-height:44px}
.stg-ntbl .stg-cc{display:flex;justify-content:flex-start}
.stg-ntbl .tbl-r{min-height:44px}
.stg-meter{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:220px}
.stg-meter-t{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);font-variant-numeric:tabular-nums}
.stg-meter-b{display:block;width:220px;height:6px;border-radius:var(--r-full);background:var(--bg-3);overflow:hidden}
.stg-meter-b i{display:block;height:100%;border-radius:var(--r-full);background:var(--c-blue)}
.stg-billing{display:flex;flex-direction:column;gap:20px;margin-top:4px;max-width:none}
.stg-plans .stg-main{gap:16px}
.stg-plans .stg-main > .page{padding:0;margin:0;max-width:none;min-width:0}
.pp .stg-billing{margin-top:16px;gap:16px}   /* night P6 (S2): under "Your plan", on the plan page's own 16px rhythm */
.pp .stg-billing > .stg-card.sec{padding:20px 24px 22px}   /* the same inset as the plan panels around it */
@media (max-width:720px){ .pp .stg-billing > .stg-card.sec{padding:18px} }
.stg-keys{display:inline-flex;gap:4px;min-width:64px}
.stg-keys kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-4);background:var(--bg-3);font:inherit;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-2)}
/* the theme: three preview tiles (never a capsule segmented control) */
.stg-themes{display:flex;flex-wrap:wrap;gap:12px}
.stg-theme{position:relative;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.stg-theme input{position:absolute;opacity:0;pointer-events:none}
.stg-theme-p{position:relative;display:block;width:132px;height:82px;border-radius:var(--r-12);overflow:hidden;box-shadow:inset 0 0 0 1px var(--bd-2);transition:var(--tr-ui)}
.stg-theme.is-on .stg-theme-p{box-shadow:0 0 0 2px var(--accent)}
.stg-theme input:focus-visible+.stg-theme-p{outline:2px solid var(--ring);outline-offset:3px}
.stg-theme-p i{position:absolute;display:block;border-radius:var(--r-4)}
.stg-theme-p .a{left:0;top:0;bottom:0;width:34px;border-radius:0}
.stg-theme-p .b{left:44px;top:12px;width:62px;height:8px}
.stg-theme-p .c{left:44px;top:28px;right:12px;bottom:12px;border-radius:var(--r-6)}
.t-light .stg-theme-p{background:var(--sw-l-bg)}.t-light .a{background:var(--sw-l-side);box-shadow:1px 0 0 var(--fixed-shade-08)}.t-light .b{background:var(--sw-l-bar)}.t-light .c{background:var(--fixed-white);box-shadow:0 0 0 1px var(--fixed-shade-06)}
.t-dark .stg-theme-p{background:var(--sw-d-bg)}.t-dark .a{background:var(--sw-d-side);box-shadow:1px 0 0 var(--fixed-light-08)}.t-dark .b{background:var(--sw-d-bar)}.t-dark .c{background:var(--sw-d-card)}

.stg-theme-l{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg-2)}
.stg-theme.is-on .stg-theme-l{color:var(--fg)}
.stg-theme-l svg{color:var(--accent)}
@media (max-width:900px){.stg-theme-p{width:104px;height:66px}.stg-meter{align-items:flex-start}}

/* ---------- review round 1 ---------- */
/* an inline action inside a row or a table reads as a button, not as text (ghost stays for Cancel in sheets) */
.stg-ctl .btn.ghost,.stg-tbl .btn.ghost,.stg-ro .btn.ghost,.stg-li .btn.ghost,.stg-inline .btn.ghost{background:var(--bg-3);color:var(--fg)}
@media (hover:hover){.stg-ctl .btn.ghost:hover,.stg-tbl .btn.ghost:hover,.stg-ro .btn.ghost:hover,.stg-li .btn.ghost:hover,.stg-inline .btn.ghost:hover{background:var(--bg-5)}}
.stg-tbl .btn.ghost.stg-red,.stg-ctl .btn.ghost.stg-red,.stg-inline .btn.ghost.stg-red{color:var(--neg)}
.stg-tbl .k2 > .lbl,.stg-tbl .stg-chip{align-self:flex-start;justify-self:start}
.stg-li.is-row .stg-li-n{flex:0 1 auto}
.stg-checks.is-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;width:100%;max-width:560px}
.stg-people{display:inline-flex;gap:3px;margin-left:8px}
.stg-people .stg-av + .stg-av{margin-left:0;box-shadow:none}
.stg-ul li::marker{color:var(--fg-4)}
ol.stg-ul{list-style:decimal}
.stg-roles .k{white-space:normal}
.stg-in.w-mid{width:220px}
.t-sys .stg-theme-p{background:linear-gradient(90deg,var(--sw-l-bg) 66px,var(--sw-d-bg) 66px)}
.t-sys .a{background:var(--sw-l-side)}
.t-sys .b{background:linear-gradient(90deg,var(--sw-l-bar) 22px,var(--sw-d-bar) 22px)}
.t-sys .c{background:linear-gradient(90deg,var(--fixed-white) 22px,var(--sw-d-card) 22px)}
@media (max-width:900px){.stg-checks.is-grid{grid-template-columns:minmax(0,1fr)}}
.stg-navsel .mb-l{flex:1;text-align:left}
.stg-li.is-src .stg-li-t span{display:block;overflow:visible}

/* ===== v90 fix round (3 Oct 2026 — FIX-settings.md SF8–SF17) ===== */
/* SF10 · wrap, never cut: names, accounts, emails, chips and notes in settings tables wrap to as many lines as they need */
.stg-tbl .k,.stg-tbl .u,.stg-tbl .k>:first-child{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-wrap:pretty}
/* every cell's first line sits on one line across the row: text starts 12px down; a 22px chip 11px; a 28–32px control is centred on that line */
.stg-tbl .k2{padding:0}
.stg-tbl .tbl-r > span:has(> .lbl),.stg-tbl .tbl-r > span:has(> .k2 > .lbl:first-child),.stg-tbl .tbl-r > span:has(> .k2 > span:first-child > .lbl){padding-top:11px}
.stg-tbl .tbl-r > span:has(> .stg-sel),.stg-tbl .tbl-r > span:has(> .stg-tg),.stg-tbl .tbl-r > span:has(> .btn),.stg-tbl .tbl-r > span:has(> .menu-btn),.stg-tbl .tbl-r > span.stg-act,.stg-tbl .tbl-r > span:has(> .sa-acts){padding-top:6px;padding-bottom:6px}
.stg-tbl .tbl-r > span:has(> .stg-ro .btn){padding-top:6px}
.stg-person,.stg-src{align-items:flex-start}
.stg-person > .av{margin-top:-2px}
.stg-src > :first-child{margin-top:-4px}
.stg-person .k{display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:4px}
.stg-person .k .lbl{flex:none}
.stg-ucs .stg-uc{white-space:nowrap}
/* SF12 · toggles sit right of their words — the alert rules too */
.stg-rule{display:grid;min-height:56px;grid-template-columns:minmax(0,1fr) auto 28px;column-gap:14px;align-items:start;padding:12px 0}
.stg-rule > .stg-tg{margin-top:1px}
.stg-rule .stg-more{margin-top:-5px}
/* SF7 · the locations count and its status breathe (W8: 24–32px) */
.stg-loc-n{display:inline-flex;align-items:center;gap:24px}
/* SF17 · a limit is a count meter, a schedule a countdown (ui/meters.js) */
.stg-ctl .m-meter.is-inline,.stg-goto .m-meter.is-inline{min-width:0}
.stg-meterline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0}
/* SF13 · the letter tiles take Home's ink (white text at 4.5:1 or better) */
.stg-logo{width:24px;height:24px;border-radius:var(--r-6);display:grid;place-items:center;flex:none;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-bold);color:var(--on-fill)}
/* the standing approvals card (SF5): a visible Pause on each running rule, "Pause all" in the header */
.sa-acts{align-items:center;gap:4px}
.sa-meta{display:block;margin-top:2px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.stg-tg > .stg-tg-t{order:-1}
.stg-loctbl .tbl-h,.stg-loctbl .tbl-r{column-gap:28px}
/* SF11 · Integrations: the categories are a row over the grid (no third column) — views as tabs with counts, the groups in one menu */
.ig-hub.is-flat{grid-template-columns:minmax(0,1fr)}
.ig-cats{display:flex;align-items:flex-end;flex-wrap:wrap;column-gap:22px;row-gap:4px;box-shadow:inset 0 -1px 0 var(--ln);min-width:0}
.ig-vw{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 1px;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg-3);white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:var(--tr-ui)}
@media (hover:hover){.ig-vw:hover{color:var(--fg);box-shadow:inset 0 -2px 0 var(--ln)}}
.ig-vw.is-on{color:var(--fg);box-shadow:inset 0 -2px 0 var(--fg)}
.ig-vw-n{font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);font-variant-numeric:tabular-nums}
.ig-vw.is-on .ig-vw-n{color:var(--fg-2)}
.ig-cats > .menu-btn{align-self:center;margin:4px 0}
.ig-grpsel.is-set{color:var(--fg)}
/* SF3 · My account › Preferences › Reduce motion — the root class (lib/store.js) stops every animation and slide in the app, as the system setting does */
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
/* the standing approvals card (Rules builder's v95-rules.css clamps these to two lines) — SF10: wrap, never cut */
.stg-card.sa-card .sa-tbl .k2 .u{display:block;-webkit-line-clamp:unset;overflow:visible}
.stg-card.sa-card .sec-hd .n{white-space:normal;overflow:visible;text-overflow:clip}
.stg-card.sa-card .sec-hd{flex-wrap:wrap;row-gap:8px}
.stg-card.sa-card .sa-acts{gap:4px;padding-top:6px}
/* SF10 · a status chip wraps inside its column (HubSpot's "Expires soon — still syncing" never runs into Last sync); the source table breathes */
.stg-tbl .tbl-r .lbl{white-space:normal;height:auto;min-height:22px;padding-top:2px;padding-bottom:2px;text-align:left;max-width:100%;line-height:var(--lh-co);border-radius:11px}
.stg-srcs .tbl-h,.stg-srcs .tbl-r{column-gap:24px}
.stg-srcs .stg-ucs{row-gap:4px}
.stg-srcs .stg-src > :first-child{flex:none}
@media (max-width:900px){ .stg-wrap,.stg.is-wide .stg-wrap{grid-template-columns:minmax(0,1fr)} }

/* ===== settings loop 2 (SL1–SL9, 3 Oct 2026) ===== */
/* SL1 · a sheet field's own error, under it */
.stg-sf-e{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--neg)}
.stg-sf-e > svg{flex:none}
.stg-sf .stg-in[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--neg)}
/* SL5 · "Changed by Sarah · Sep 2 · Any admin → Sarah Mitchell" under a row's help; a table card's last change in its footer */
.stg-chg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:2px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);max-width:62ch}
.stg-chg.is-card{margin:10px 0 2px;max-width:none}
.stg-chg.is-card .stg-a{font-size:var(--t-co)}
/* SL4 · "Applies Mon Sep 21": a calm chip (never a colour that says something is wrong) */
.stg-pend{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r-full);background:var(--accent-t);color:var(--fg-2);font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);white-space:nowrap}
.stg-pend > svg{flex:none;color:var(--accent)}
/* SL4 · the one line on the page a pending change affects */
.stg-pendline{display:flex;align-items:flex-start;gap:8px;margin:0 0 16px;padding:8px 12px;border-radius:var(--r-12);background:var(--accent-t);color:var(--fg-2);font-size:var(--t-body);line-height:var(--lh-body)}
.stg-pendline > svg{flex:none;margin-top:3px;color:var(--accent)}
.stg-pendline b{color:var(--fg);font-weight:var(--w-semibold)}
.stg-pendline .stg-a{white-space:nowrap;font-weight:var(--w-medium)}
@media (max-width:640px){ .stg-pendline{flex-wrap:wrap} .stg-pendline .stg-a{white-space:normal} }
/* SL7 · ⌘K opens a setting's tab with its row marked */
.stg-row.is-hl{border-radius:var(--r-8);box-shadow:0 0 0 2px var(--ring);background:color-mix(in srgb,var(--accent) 4%,transparent)}
/* SL9 · "Why can't … approve this?" */
.stg-why{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0}
.stg-why .stg-sel{min-width:160px}
.stg-whya{display:flex;align-items:flex-start;gap:8px;margin:6px 0 2px;padding:10px 12px;border-radius:var(--r-12);background:var(--lvl-0);box-shadow:inset 0 0 0 1px var(--bd);font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg)}
.stg-whya > svg{flex:none;margin-top:3px}
.stg-whya.is-yes > svg{color:var(--pos)}
.stg-whya.is-no > svg{color:var(--fg-3)}
/* SL3 · how many notifications your settings leave out of the bell */
.stg-hidn{display:flex;align-items:center;gap:6px}
.stg-hidn > svg{flex:none}
.np-hid{color:var(--fg-3);padding:10px 12px 12px}
.np-hid a{color:var(--link-tint,var(--link));font-weight:var(--w-medium)}
/* SL8 (P2-9) · the ≤ 1320 strip keeps its groups: the group's name leads its first tab */
.stg-sg{display:inline-flex;align-items:center;gap:10px;height:40px}
.stg-sg:not(:first-child)::before{content:"";flex:none;width:1px;height:16px;margin-right:2px;background:var(--ln)}
.stg-sgl{font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-3);white-space:nowrap}
/* SL8 (P2-10 · P2-11) · tables: no sideways scroll at 900 (the rows' −8px bleed stays inside the card), cards under 760px of page (the app's one
   table pattern — v103-a11y.css .tbl.is-tbl) so no column is cut at 390 */
@media (max-width:900px){ .stg-tbl{overflow-x:visible} .stg-tbl .tbl-h,.stg-tbl .tbl-r{min-width:0} }
@container pg (max-width:760px){
  .stg-card .stg-tbl.is-tbl > .tbl-r{margin:0;padding:12px 0}   /* beats v103-a11y.css (loaded later): the card's rows line up with its header rule */
  .stg-card .stg-tbl.is-tbl > .tbl-r.is-attn{padding:12px;border-radius:var(--r-8)}   /* fixer r1: a tinted row keeps its text off the tint's edges */
  .stg-tbl.is-tbl .stg-sel{max-width:100%}
  .stg-tbl.is-tbl > .tbl-r > .stg-act{justify-content:flex-end}
  .stg-tbl.is-tbl > .tbl-r > :not(:first-child) > .stg-ucs{justify-content:flex-end}
}
/* SL8 (P3) · Plans: the plan names are h2 (no h1 → h3 skip), looking as before */
.pp-nm h2{margin:0;font-size:var(--t-t2);line-height:var(--lh-t2);font-weight:var(--w-semibold);letter-spacing:var(--ls-t2);color:var(--fg)}
/* SL8 (P2-11) · under 760px of page every table in the settings is a card — the shared kit's tables already are (.is-tbl); the ones other pages
   draw into the settings (Standing approvals, Integrations) follow the same pattern by their role and data-label */
@container pg (max-width:760px){
  .stg-main .tbl[role="table"]:not(.is-tbl){min-width:0;width:100%;overflow:visible}
  .stg-main .tbl[role="table"]:not(.is-tbl) > .tbl-h{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}
  .stg-main .tbl[role="table"]:not(.is-tbl) > .tbl-r{display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px;margin:0;padding:12px 0;min-width:0;min-height:0;height:auto}
  .stg-main .tbl[role="table"]:not(.is-tbl) > .tbl-r > :not(:first-child){display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:2px 8px;min-width:0;text-align:right}
  .stg-main .tbl[role="table"]:not(.is-tbl) > .tbl-r > :not(:first-child)[data-label]::before{content:attr(data-label);flex:none;max-width:55%;margin-right:auto;color:var(--fg-3);font-size:var(--t-co);line-height:var(--lh-co);text-align:left;white-space:normal}
  .stg-main .tbl[role="table"]:not(.is-tbl) > .tbl-r > :not(:first-child):empty{display:none}
  /* Plans › usage: one card per site, each limit a line */
  .stg-plans .pp-tw{overflow:visible;margin:12px 0 0;padding:0}
  .stg-plans .pp-ut{min-width:0!important}   /* stays !important: lplans.js gives the usage table an inline min-width */
  .stg-plans .pp-ur{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .stg-plans .pp-ur.is-h{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}
  .stg-plans .pp-uc[data-label]::before{content:attr(data-label);color:var(--fg-3);font-size:var(--t-co);line-height:var(--lh-co)}
  .stg-plans .pp-ux{justify-self:start}
}
/* SL8 (P2-12) · a long chip wraps on a phone instead of running past the card (Alerts' list, Roles' people) */
@media (max-width:640px){ .stg-ucs .stg-uc{white-space:normal;height:auto;min-height:24px;padding-top:3px;padding-bottom:3px;text-align:left} }
/* SL8 (P3) · a switch's target is 34 × 24 (WCAG 2.5.8) — the input sits over the knob, which stays 30 × 18 */
/* SL8 (P3) · every theme tile keeps its edge — the light half of "Match system" had none in light mode */
.stg-theme-p::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--bd-2);pointer-events:none}
/* SL8 (P3) · "Used by": a page you can open carries a chevron; a thing that isn't a page stays an outlined label */
.stg-used a.stg-uc::after{content:"";flex:none;width:5px;height:5px;margin-left:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.55}
/* SL8 (a11y re-run, loop 2) · targets ≥ 24px and no 8px scroller left at 900 */
.stg-st{display:inline-flex;align-items:center;height:40px;padding:0 1px;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg-3);white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:var(--tr-ui);min-width:24px;justify-content:center}
.stg-ck input{width:24px;height:24px;margin:-3px 0 0 -4px}
.stg-ctl .stg-inline > .stg-a,.stg-ctl .stg-ro > .stg-a{display:inline-flex;align-items:center;min-height:24px}
@media (max-width:900px){ .stg-card .stg-tbl.sa-tbl{overflow-x:visible} }

/* v107 (his order): one search over every setting — at the top of the settings nav (and of the strip under 1320px) */
.stg-find{position:relative;margin:0 0 10px}
.stg-navm .stg-find{margin:0 0 8px;flex:none;width:100%;max-width:320px;min-width:0}   /* D01: the strip stacks (column) — no flex-basis on the vertical axis */
.stg-find-w{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r-8);background:var(--surface-1);color:var(--text-3)}
.stg-find-q{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:13px;color:var(--text-1);outline:none}
.stg-find-q::placeholder{color:var(--text-3)}
.stg-find-w:focus-within{border-color:var(--accent)}
.stg-find-r{position:absolute;left:0;top:calc(100% + 6px);z-index:40;width:max(100%,420px);max-height:380px;overflow:auto;padding:6px;border-radius:var(--r-12);background:var(--surface-1);box-shadow:var(--sh-high)}
.stg-find-i{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:8px 10px;border-radius:var(--r-8);text-align:left;background:none;color:var(--text-1)}
.stg-find-i:focus-visible{background:var(--hover)}@media (hover:hover){.stg-find-i:hover{background:var(--hover)}}
.stg-find-l{font-size:13px;line-height:18px;font-weight:var(--w-medium)}
.stg-find-s{font-size:12px;line-height:16px;color:var(--text-3)}
.stg-find-0{padding:10px;font-size:13px;color:var(--text-3)}

/* ---------- fixer r1 (settings-auth) ---------- */
/* Client & reports › people (wide screens): the name column keeps a floor, so a long email never runs under the role words; the role words wrap
   and the switch stays at the row's right edge, in line with the other rows */
.stg-li.is-viewer{align-items:flex-start}
.stg-li.is-viewer > .stg-av{margin-top:2px}
.stg-li.is-viewer > .stg-li-t{flex:1 1 220px;min-width:200px}
.stg-li.is-viewer > .stg-li-t > span{overflow-wrap:anywhere}
.stg-li.is-viewer > .stg-inline{flex:1 1 320px;min-width:0;align-items:flex-start}
.stg-li.is-viewer > .stg-inline .stg-muted{flex:1;min-width:0;white-space:normal;text-wrap:pretty;padding-top:2px}
.stg-li.is-viewer > .stg-more{margin-top:-2px}
/* "What else it does": on a phone the chip and the select drop under the capability, so its name never breaks a letter per line */
@container pg (max-width:600px){
  .stg-li.is-cap{flex-wrap:wrap;row-gap:6px}
  .stg-li.is-cap > .stg-li-t{flex:1 1 100%}
  .stg-li.is-cap > .stg-sel,.stg-li.is-cap > select{flex:1 1 160px;max-width:none}
  /* Client & reports › people: the name and email keep the row; the role words and the switch take the next line */
  .stg-li.is-viewer{flex-wrap:wrap;row-gap:6px}
  .stg-li.is-viewer > .stg-li-t{flex:1 1 calc(100% - 80px);min-width:0}
  .stg-li.is-viewer > .stg-inline{order:3;flex:1 1 100%;padding-left:36px;white-space:normal;justify-content:space-between}
  .stg-li.is-viewer > .stg-inline .stg-muted{white-space:normal;min-width:0}
}
/* the delete sheet: Export first, beside its alternative */
.stg-del-x{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:4px 0 12px}
.stg-help .stg-hm{margin-top:2px}
.stg-help .stg-hm > span{display:block;margin-top:2px}
/* a card title stays on one line; a long description moves under it (Markets › "Where searches are checked", Workspace defaults) — desktop only */
@container pg (min-width:601px){
  .stg-card > .sec-hd{flex-wrap:wrap;row-gap:2px}
  .stg-card > .sec-hd > h2{flex:none;white-space:nowrap}
  .stg-loctbl .tbl-r .lbl{white-space:nowrap}
}
/* the phone tab row starts at the open tab's group (pages/lsettings.js fitStrip) */
.stg-strip-l .is-skip{display:none}
.stg-strip-l > .stg-sg.is-first::before{display:none}
.stg-cacts{gap:10px;justify-content:flex-end}
/* ---------- fixer r1 (settings-auth): Changes / Results — all projects (pages/lagency.js) ---------- */
.ag-page > .ag-card + .ag-lanes{margin-top:16px}
/* the per-client cards fill whole rows (pages/lagency.js sumCols): 3 to a row on a narrower page, up to 6 on a wide one, 2 on a phone */
.ag-page .ag-sum{grid-template-columns:repeat(var(--ag-mid,3),minmax(0,1fr))}
@container pg (min-width:1500px){ .ag-page .ag-sum{grid-template-columns:repeat(var(--ag-wide,6),minmax(0,1fr))} }
@container pg (max-width:700px){ .ag-page .ag-sum{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ag-page .ag-sc-h b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-wrap:pretty}
/* the client column is as wide as a name needs; what changed wraps instead of ending in "…" (the no-cut rule) */
.ag-page .ag-row{grid-template-columns:minmax(150px,.6fr) 152px minmax(0,2.6fr) 150px;align-items:start;padding-top:10px;padding-bottom:10px}
.ag-page .ag-row.is-res{grid-template-columns:132px minmax(150px,.6fr) minmax(0,2.6fr) 96px}
.ag-page .ag-row.is-h{align-items:center;padding-top:6px;padding-bottom:6px}
.ag-page .ag-row > .ag-cl,.ag-page .ag-row > .ag-who,.ag-page .ag-row > .ag-st,.ag-page .ag-row > .ag-d{min-height:var(--lh-body);padding-top:1px}
.ag-page .ag-cl > span:last-child{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.ag-page .ag-t b,.ag-page .ag-t .u{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-wrap:pretty}
@media (max-width:1100px){ .ag-page .ag-row{grid-template-columns:minmax(120px,.7fr) minmax(0,2fr) 132px} .ag-page .ag-row.is-res{grid-template-columns:120px minmax(110px,.7fr) minmax(0,2fr)} }
/* on a phone a row is a small card: the client and the result on one line, what changed under them at full width (never a letter-wide column) */
@container pg (max-width:700px){
  .ag-page .ag-row.is-h{display:none}
  .ag-page .ag-row,.ag-page .ag-row.is-res{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cl st" "t t";row-gap:4px;column-gap:10px}
  .ag-page .ag-row.is-res{grid-template-areas:"st d" "cl cl" "t t"}
  .ag-page .ag-row > .ag-cl{grid-area:cl}
  .ag-page .ag-row > .ag-st{grid-area:st;justify-self:start}
  .ag-page .ag-row:not(.is-res) > .ag-st{justify-self:end}
  .ag-page .ag-row > .ag-t{grid-area:t}
  .ag-page .ag-row > .ag-d{grid-area:d;display:block}
  .ag-page .ag-row > .ag-who{display:none}
}
/* ---------- fixer r1 (settings-auth): Plans & billing — add-on packs can be added (pages/lplans.js) ---------- */
.pp .pp-pk.has-add{grid-template-columns:minmax(0,1fr) auto auto}
.pp .pp-pk.has-add > .pp-pkc{grid-column:3;grid-row:1/3;align-self:center;display:flex;width:84px;justify-content:flex-end}
.pp .pp-pkon{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;margin:6px 0 0;padding:0 0 0 20px;list-style:none}
.pp .pp-pkon li{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.pp .pp-pkon li > svg{flex:none;color:var(--st-green-fg)}
.pp .pp-pkon .lk{flex:none}
.pp .pp-pknote{margin-top:10px}
.pp .pp-wsa{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:4px}
.pp .pp-wsi > .pp-pkon{padding-left:0}
.pp .pp-wsab{margin-left:-8px}
.pp .pp-pkb{flex:none}
@media (max-width:640px){
  .pp .pp-pk.has-add{grid-template-columns:minmax(0,1fr) auto}
  .pp .pp-pk.has-add > .pp-pkc{grid-column:1/-1;grid-row:auto;width:auto;justify-content:flex-start;padding-left:12px;margin-top:4px}
}