/* =====================================================================================
   RJ DTC Admin · Round 4 · Settings pages + sign-in · st.css   (prefix st-)
   Shared by the ten settings/auth page folders (generated by settings-brand/src/build.py).
   Load order: _kit tokens -> base -> data-table -> form-controls -> wizard-stepper -> status-feedback
   -> data-display -> app-shell -> overlays -> page-help -> st.css.
   Only what turns kit specimens into full-viewport pages. Values come from tokens.
   Two dedicated compositions: .kit-d (desktop /) and .kit-m (phone /m/). No size queries.
   ===================================================================================== */

.st{background:hsl(var(--background))}
.st a.btn{text-decoration:none}

/* ---------- desktop shell: sticky settings column and top bar ---------- */
.kit-d .st-app{min-height:100vh;border-radius:0;box-shadow:none;overflow:clip}
.kit-d .st-side{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.kit-d .st-side::-webkit-scrollbar{display:none}
.kit-d .st-main{overflow:clip;display:flex;flex-direction:column;min-width:0}
.st-top{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.st-top .top-r{gap:var(--s-3)}
.st-page{width:100%;max-width:var(--content-max);padding:var(--s-6) var(--s-6) var(--s-16);flex:1}
.st-page.narrow{max-width:1040px}
.st-ph .page-title{display:flex;align-items:center;gap:var(--s-3)}
.st-ph p .code{font-size:var(--text-small)}
.st-ph .ph-r{align-items:center}

/* ---------- regions and states (st.js shows one state at a time) ---------- */
.st-stack{display:flex;flex-direction:column;gap:var(--s-5)}
.st-sec{margin-top:var(--s-8)}
.st-sec-h{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-3)}
.st-sec-h h2{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.st-sec-h .q{font-size:var(--text-small)}
.st-sec-h .r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}
.st-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card)}
.st-card-h{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5) 0}
.st-card-h h3{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
.st-card-h .r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}
.st-card-h .q{font-size:var(--text-small)}
.st-card-b{padding:var(--s-4) var(--s-5) var(--s-5)}
.st-card-b>p.q{font-size:var(--text-small);margin-bottom:var(--s-3)}
.st-card-f{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-5);border-top:1px solid hsl(var(--border));font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.st-card-f .r{margin-left:auto}
.st-alert{margin-bottom:var(--s-5)}
.st-meta{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.st-meta code,.st-errmeta code{font-size:var(--text-small);color:hsl(var(--foreground))}
.st-errmeta{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:var(--s-2)}
.st-emp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);padding:var(--s-12) var(--s-6);border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-card);background:hsl(var(--card))}
.st-emp .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:hsl(var(--muted));color:hsl(var(--muted-foreground));margin-bottom:var(--s-2)}
.st-emp h3{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.st-emp p{max-width:52ch;color:hsl(var(--muted-foreground))}
.st-emp .row{display:flex;gap:var(--s-2);margin-top:var(--s-3);flex-wrap:wrap;justify-content:center}
.st-emp.err{border-style:solid;border-color:hsl(var(--destructive)/.3);background:hsl(var(--destructive)/.03)}
.st-emp.err .ico{background:hsl(var(--destructive)/.08);color:hsl(var(--destructive))}
.st-loadline{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-4)}
.st-skrows{display:flex;flex-direction:column}
.st-skrow{display:grid;grid-template-columns:var(--cols,2fr 1fr 1fr 1fr);gap:var(--s-4);align-items:center;min-height:var(--row);padding:0 var(--s-4);border-bottom:1px solid hsl(var(--border))}
.st-skrow:last-child{border-bottom:0}
.st-skrow .two{display:flex;flex-direction:column;gap:6px}

/* definition list (facts) */
.st-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-5);margin:0;font-size:var(--text-body)}
.st-dl dt{color:hsl(var(--muted-foreground))}
.st-dl dd{margin:0;min-width:0;font-variant-numeric:tabular-nums}

/* forms: fc-form rows on the page, one save bar pinned to the bottom of the column */
.st-form .fc-form:first-child{padding-top:var(--s-2)}
.st-form .fc-form-h .chip{margin-top:var(--s-2)}
.st-savebar{position:sticky;bottom:0;z-index:calc(var(--z-sticky) * 2);margin:var(--s-6) calc(var(--s-6) * -1) calc(var(--s-16) * -1);padding:var(--s-3) var(--s-6)}
.st-savebar .r{margin-left:auto;display:flex;gap:var(--s-2)}
.st-savebar .fc-dirty{visibility:hidden}
.is-dirty .st-savebar .fc-dirty{visibility:visible}
.st-key{font:var(--w-regular) var(--text-micro)/1 var(--font-code);color:hsl(var(--muted-foreground));margin-left:auto}
.fc-lrow .st-key{margin-left:auto}
.st-swatch{width:18px;height:18px;border-radius:var(--r-chip);border:1px solid hsl(var(--foreground)/.12);flex:none}
.st-flags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.st-flag{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card))}
.st-flag .switch{margin-top:1px;flex:none}
.st-flag b{display:block;font-weight:var(--w-medium)}
.st-flag small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px;line-height:1.4}
.st-flag .chip{margin-left:auto;flex:none}

/* fixed overlay layers (kit.js stages sized to the viewport) */
.st-layer{position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none;overflow:hidden}
.st-layer>.k-sheet,.st-layer>.k-dialog,.st-layer.open>.k-scrim{pointer-events:auto}
.kit-d .st-help-layer{left:var(--sidebar-w)}
.kit-d .st-help-layer>.k-sheet,.kit-d .st-help-layer>.k-scrim{top:var(--topbar-h)}
.st-help-layer .k-sheet{display:flex;flex-direction:column}
.st-cmd-layer>.k-dialog{top:14vh;width:auto;background:transparent;box-shadow:none;border-radius:var(--r-frame);overflow:visible;transform:translate(-50%,var(--pop-shift)) scale(.985)}
.st-cmd-layer.open>.k-dialog{transform:translate(-50%,0)}
.st-cmd-field{flex:1;min-width:0;border:0;outline:0;background:transparent;font:var(--w-regular) var(--text-read)/1 var(--font-ui);color:hsl(var(--foreground))}
.st-cmd-field::placeholder{color:hsl(var(--muted-foreground))}
.st-layer .k-dialog.st-dlg{width:min(460px,calc(100% - var(--s-8)))}
.st-layer .k-sheet{display:flex;flex-direction:column}

/* toasts */
.st-toasts{position:fixed;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--toast-gap);pointer-events:none}
.kit-d .st-toasts{left:calc(var(--sidebar-w) + var(--s-6));bottom:var(--s-6);width:340px}
.st-toasts .toast{pointer-events:auto}

/* preview-state switcher (prototype chrome, not product UI) */
.st-proto{position:fixed;z-index:var(--z-toast);display:flex;align-items:center;gap:var(--s-2);transition:opacity var(--motion-hover)}
.kit-d .st-proto{right:var(--s-5);bottom:calc(var(--s-5) + var(--control-h) + var(--s-6))}
.st-proto>.k-anchor>button{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--control-h-sm);padding:0 var(--s-3);border-radius:var(--r-pill);
  border:1px dashed hsl(var(--input));background:hsl(var(--background)/.94);backdrop-filter:blur(6px);box-shadow:var(--e-pop);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.st-proto>.k-anchor>button b{font-weight:var(--w-semibold);color:hsl(var(--foreground))}
.st-proto .k-pop{max-height:60vh;overflow-y:auto}
.kit-d .st-proto .k-pop{left:auto;right:0}
body:has(.st-layer.open) .st-proto{opacity:0;pointer-events:none}

/* tables */
.st-tbl .dt{table-layout:fixed}
.st-tbl .dt th{top:var(--topbar-h)}
.st-tbl .dt td .q{font-size:var(--text-small)}
.st-tbl .w-act{text-align:right}
.st-tbl .dt-t1{color:inherit;text-decoration:none}
a.dt-t1:hover{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3)}
.st-tfoot{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3);font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.st-tfoot .r{margin-left:auto}
.st-mask{font-family:var(--font-code);font-size:var(--text-small);letter-spacing:0}
.st-mask i{font-style:normal;color:hsl(var(--muted-foreground))}
.st-scopes{display:flex;flex-wrap:wrap;gap:4px}
.st-warn{color:hsl(var(--warning))}
.st-bad{color:hsl(var(--destructive))}
.st-ok{color:hsl(var(--success))}

/* provisioning step list: status-feedback .sf-steps plus a failed row */
.st-steps li.fail{font-weight:var(--w-medium)}
.st-steps li.fail .m{color:hsl(var(--destructive))}
.st-steps li .tm .btn{font-family:var(--font-ui)}
.st-steps li .st-step-e{display:block;font:var(--w-regular) var(--text-small)/1.4 var(--font-ui);color:hsl(var(--destructive));margin-top:2px}
.st-steps li>.t{flex:1;min-width:0;padding:var(--s-2) 0}

/* ======================================== PHONE ======================================== */
.kit-m .st-phone{min-height:100vh;display:flex;flex-direction:column;background:hsl(var(--background))}
.kit-m .st-phone .p-bar{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.st-pcrumb{display:flex;align-items:center;gap:var(--s-2)}
.st-pcrumb .st-proto{position:static;margin-left:auto}
.st-pcrumb .st-proto>.k-anchor>button{box-shadow:none;height:28px;padding:0 10px;font-size:var(--text-micro)}
.st-pcrumb .st-proto .k-pop{left:auto;right:0}
.st-pback{display:inline-flex;align-items:center;gap:var(--s-1);margin:var(--s-2) var(--s-4) 0;font-size:var(--text-small);color:hsl(var(--muted-foreground));text-decoration:none;min-height:32px}
.kit-m .st-body{padding:var(--s-4);flex:1;display:flex;flex-direction:column;gap:var(--s-4)}
.kit-m .st-sec{margin-top:var(--s-2)}
.kit-m .st-sec-h{margin-bottom:var(--s-2);flex-wrap:wrap}
.kit-m .st-card-h{padding:var(--s-4) var(--s-4) 0}
.kit-m .st-card-b{padding:var(--s-3) var(--s-4) var(--s-4)}
.kit-m .st-card-f{padding:var(--s-3) var(--s-4)}
.kit-m .st-emp{padding:var(--s-10) var(--s-4)}
.kit-m .st-emp .row{flex-direction:column;align-self:stretch}
.kit-m .st-emp .row .btn{width:100%}
.kit-m .st-flags{grid-template-columns:minmax(0,1fr)}
.kit-m .st-dl{gap:var(--s-2) var(--s-4)}
.kit-m .st-toasts{left:var(--s-3);right:var(--s-3);bottom:calc(var(--tabbar-h) + var(--control-h-m-lg) + var(--s-8))}
.kit-m .tabbar{bottom:0}
.kit-m .st-help-layer .ph-d-body{padding:0 var(--s-4) var(--s-5)}
.kit-m .st-help-layer .ph-d-head{padding:var(--s-2) var(--s-2) var(--s-3) var(--s-4)}
.kit-m .st-cmd-sheet .sh-cmd{width:100%;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;height:100%}
.kit-m .st-cmd-sheet .sh-pop-l{max-height:none;flex:1}
.kit-m .st-cmd-sheet .sh-cmd-f{display:none}

/* phone: one primary action in thumb reach, above the tab bar */
.kit-m .st-actbar{position:sticky;bottom:var(--tabbar-h);z-index:calc(var(--z-sticky) * 2);display:flex;gap:var(--s-2);align-items:center;
  padding:var(--s-3) var(--s-4);background:hsl(var(--background)/.96);backdrop-filter:blur(8px);border-top:1px solid hsl(var(--border))}
.kit-m .st-actbar .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}
.kit-m .st-actbar .btn.fit{flex:none}
.kit-m .st-actbar .st-actmsg{flex:1;min-width:0;font-size:var(--text-small);color:hsl(var(--muted-foreground));line-height:1.3}
.kit-m .st-actbar .st-actmsg b{display:block;color:hsl(var(--foreground));font:var(--w-semibold) var(--text-body)/1.3 var(--font-voice)}

/* phone list rows (data-table .dt-li anatomy, tappable) */
.kit-m .st-list{list-style:none;margin:0 calc(var(--s-4) * -1);border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border))}
.kit-m .st-list .dt-li{color:inherit;text-decoration:none}
.kit-m .st-list .dt-li-main{min-width:0}
.kit-m .st-groups{display:flex;flex-direction:column;gap:var(--s-5)}
.kit-m .st-ghead{font:var(--w-semibold) var(--text-small)/1.2 var(--font-voice);color:hsl(var(--muted-foreground));margin-bottom:var(--s-2);display:flex;gap:var(--s-2)}
.kit-m .st-ghead span{margin-left:auto;font-weight:var(--w-regular)}

/* phone sheets */
.kit-m .st-sheet-h{display:flex;align-items:center;gap:var(--s-2);min-height:52px;padding:0 var(--s-2) 0 var(--s-4);border-bottom:1px solid hsl(var(--border));flex:none}
.kit-m .st-sheet-h b{flex:1;font:var(--w-semibold) var(--text-section)/1.2 var(--font-voice);letter-spacing:var(--tr-section)}
.kit-m .st-sheet-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4)}
.kit-m .st-sheet-f{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);padding:var(--s-3) var(--s-4) var(--s-5);border-top:1px solid hsl(var(--border))}
.kit-m .st-sheet-f .btn{height:var(--control-h-m-lg)}
.kit-m .st-layer .k-dialog.st-dlg .ov-dg-f{flex-direction:column-reverse;align-items:stretch}

/* ---------- small shared bits ---------- */
.page-title .cnt{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 var(--s-2);border:1px solid hsl(var(--border));border-radius:var(--r-pill);
  font:var(--w-medium) var(--text-small)/1 var(--font-ui);font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground));position:relative;top:1px}
.st-sm{font-size:var(--text-micro)}
.st-mono{font-size:10.5px}
.kit-m .st-bli .dt-li-r{align-self:center;flex-direction:row;align-items:center;gap:var(--s-2);color:hsl(var(--muted-foreground))}
.kit-m .st-bli{padding-right:var(--s-3)}

/* ---------- create a brand: rail · sections · recipes ---------- */
.st-new{display:grid;grid-template-columns:232px minmax(0,1fr) 248px;gap:var(--s-5);align-items:start}
.st-new-col{min-width:0;display:flex;flex-direction:column}
.st-new-col>.st-card{margin-top:var(--s-3)}
.kit-d .st-rail{position:sticky;top:calc(var(--topbar-h) + var(--s-4))}
.kit-d .st-recipes{position:sticky;top:calc(var(--topbar-h) + var(--s-4))}
.st-recipe{display:flex;flex-direction:column;gap:2px;padding:var(--s-2) var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-control);margin-top:var(--s-2)}
.st-recipe.on{border-color:hsl(var(--primary)/.4);background:hsl(var(--accent)/.5)}
.st-recipe b{font-weight:var(--w-medium);font-size:var(--text-body)}
.st-recipe span{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.st-card-f>svg{flex:none}
.st-rec{height:18px;margin-left:var(--s-2)}
.st-cks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2) var(--s-4);padding:var(--s-1) 0 var(--s-3)}
.st-cks.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid hsl(var(--border))}
.st-cks .fc-ck small.code{font-size:var(--text-micro)}
.st-cfg-h{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-5);margin-bottom:var(--s-2)}
.st-cfg-h .fc-gl{margin:0}
.st-cfg-h .r{margin-left:auto;display:flex;gap:var(--s-1)}
.st-inline{margin-top:var(--s-4)}
.st-acc{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card))}
.st-acc+.st-acc{margin-top:var(--s-2)}
.st-acc summary{list-style:none;display:flex;align-items:center;gap:var(--s-3);min-height:48px;padding:0 var(--s-4);cursor:pointer}
.st-acc summary::-webkit-details-marker{display:none}
.st-acc summary b{font-weight:var(--w-semibold)}
.st-acc summary .q{font-size:var(--text-small)}
.st-acc summary svg{margin-left:auto;color:hsl(var(--muted-foreground));transition:transform var(--motion-pop-in)}
.st-acc[open] summary svg{transform:rotate(180deg)}
.st-acc-b{padding:0 var(--s-4) var(--s-2);border-top:1px solid hsl(var(--border))}
.st-acc-b .st-cfg-h{margin-top:var(--s-2)}
.st-prog .sf-bar{margin-bottom:var(--s-3)}
.st-prog .st-card-h .r{font-weight:var(--w-regular)}
.kit-d .st-wzbar{margin:var(--s-6) calc(var(--s-6) * -1) calc(var(--s-16) * -1);border-top:1px solid hsl(var(--border));background:hsl(var(--background)/.94);backdrop-filter:blur(8px)}
.kit-d .st-wzbar .wz-save{margin-right:auto}
.kit-m .st-mflow{display:flex;flex-direction:column;gap:var(--s-3)}
.kit-m .st-mflow .wz-sec+.wz-sec{margin-top:0}
.kit-m .st-mflow .wz-sec-t{width:auto;flex:1}
.kit-m .st-mflow .wz-sec-s{display:none}
.kit-m .st-mflow .wz-sec.is-current .wz-sec-s,.kit-m .st-mflow .wz-sec.is-error .wz-sec-s{display:block;flex:none}
.kit-m .st-cks,.kit-m .st-cks.two{grid-template-columns:minmax(0,1fr)}
.kit-m .st-cfg-h{flex-wrap:wrap}
.st-mrecipe{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:56px;padding:0 var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));text-align:left;color:inherit}
.st-mrecipe span{flex:1;display:flex;flex-direction:column}
.st-mrecipe small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.st-mrecipe>svg:last-child{color:hsl(var(--muted-foreground))}
.kit-m .st-prog .st-card-h{flex-wrap:wrap}
.kit-m .st-prog .st-card-f{flex-direction:column;align-items:stretch}
.kit-m .st-prog .st-card-f .r{margin-left:0}
.kit-m .st-prog .st-card-f .btn{width:100%}
.kit-d .st-new .wz-sec-t{width:150px}

/* ---------- brand detail ---------- */
.st-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-5);align-items:start}
.st-detail-main{min-width:0}
.st-detail-side{display:flex;flex-direction:column;gap:var(--s-4)}
.kit-d .st-detail-side{position:sticky;top:calc(var(--topbar-h) + var(--s-4))}
.st-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.st-two>.st-card{display:flex;flex-direction:column}
.st-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-bottom:var(--s-3)}
.st-tile{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-control);background:hsl(var(--muted)/.35)}
.st-tile .k{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.st-tile b{font:var(--w-semibold) var(--text-section)/1 var(--font-voice);font-variant-numeric:tabular-nums}
.st-tile.warn b{color:hsl(var(--warning))}
.st-tile.bad b{color:hsl(var(--destructive))}
.st-meta .spin{width:12px;height:12px;vertical-align:-2px}
.st-keys{list-style:none;display:flex;flex-direction:column;gap:var(--s-3)}
.st-keys li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2)}
.st-keys li b{font-weight:var(--w-medium)}
.st-keys .st-scopes{width:100%}
.st-danger{border-color:hsl(var(--destructive)/.35)}
.st-danger h3{color:hsl(var(--destructive))}
.st-danger .lbl{margin-bottom:var(--s-2)}
.st-avail .fc-sw-l b{font-weight:var(--w-semibold)}
.nw{white-space:nowrap}
.kit-m .st-mph{padding-bottom:0}
.kit-m .st-mph .page-title{flex-wrap:wrap}
.kit-m .st-two,.kit-m .st-detail{grid-template-columns:minmax(0,1fr)}
.kit-m .st-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.kit-m .st-mlist{overflow:hidden}
.kit-m .st-mrow{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.kit-m .st-mrow:last-child{border-bottom:0}
.kit-m .st-mrow>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kit-m .st-mrow>div span{font-size:var(--text-small);color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-m .st-mrow .dd-act{flex:none;margin-top:1px}
.kit-m .st-actbar .spin{flex:none}
.st-pcrumb{white-space:nowrap;min-width:0}
.st-pcrumb .st-proto{min-width:0;flex:0 1 auto;max-width:52%}
.st-pcrumb .st-proto>.k-anchor{max-width:100%}
.st-pcrumb .st-proto>.k-anchor>button{max-width:100%}
.st-pcrumb .st-proto>.k-anchor>button b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kit-m .st-uli{grid-template-columns:auto minmax(0,1fr);align-items:center}
.kit-m .st-uli.is-off{opacity:.7}
.kit-m .st-rrow p{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px;white-space:normal}

/* ---------- API keys ---------- */
.st-lockline{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border-radius:var(--r-control);background:hsl(var(--muted));font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.st-lockline svg{flex:none;color:hsl(var(--foreground))}
.st-kname{font-weight:var(--w-medium)}
.st-block{display:block;margin-top:2px}
.st-warn svg,.st-bad svg{vertical-align:-2px}
.st-create{margin-top:var(--s-5)}
.st-create .st-card-h p{margin-top:2px}
.st-create .sf-alert{margin-bottom:var(--s-4)}
.st-btns{display:flex;gap:var(--s-2)}
.st-scatalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);padding:var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--muted)/.35)}
.st-scat-h{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.st-scat-h b{font-weight:var(--w-semibold);font-size:var(--text-body)}
.st-scat-h .btn{margin-left:auto}
.st-schips{display:flex;flex-wrap:wrap;gap:6px}
.st-schip{height:28px;padding:0 10px;border:1px solid hsl(var(--input));border-radius:var(--r-chip);background:hsl(var(--background));font:var(--w-medium) var(--text-micro)/1 var(--font-code);color:hsl(var(--foreground));
  transition:background-color var(--motion-hover),border-color var(--motion-hover)}
.st-schip:hover{border-color:hsl(var(--input-hover))}
.st-schip[aria-pressed=true]{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.st-schip:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.st-reveal{margin-top:var(--s-5)}
.st-token{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-control);background:hsl(var(--background))}
.st-token code{flex:1;min-width:0;font:var(--w-medium) var(--text-body)/1.3 var(--font-code);overflow-wrap:anywhere}
.kit-m .st-scatalog{grid-template-columns:minmax(0,1fr)}
.kit-m .st-schip{height:36px}
.kit-m .st-create .st-card-f .r{margin-left:0;width:100%;display:grid;grid-template-columns:1fr 1fr}
.kit-m .st-create .st-card-f .btn{height:var(--control-h-m)}
.kit-m .st-kli{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.kit-m .st-kli .st-scopes{margin-top:2px}
.kit-m .st-kmeta{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .st-reveal{margin-top:0}
.kit-m .st-reveal .act .btn{width:100%;height:var(--control-h-m)}
.st-iline{display:inline-flex;align-items:center;gap:4px}

/* ---------- audit log ---------- */
.st-filter{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 180px auto;gap:var(--s-3);align-items:end;padding:var(--s-4);margin-bottom:var(--s-4);
  border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--muted)/.35)}
.st-filter-b{display:flex;gap:var(--s-1)}
.st-filter.m{display:flex;flex-direction:column;align-items:stretch;padding:0;border:0;background:none;margin:0}
.st-audit{overflow:hidden}
.st-audit .dd-audit-f{display:flex;padding:var(--s-3) var(--s-4);border-top:1px solid hsl(var(--border));font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.st-fcnt{margin-left:var(--s-1)}
.kit-m .st-actbar .btn .cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:var(--r-pill);background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-size:var(--text-micro)}
.kit-m .st-actbar .btn .cnt[hidden]{display:none}

/* ---------- rules ---------- */
.st-oos{max-width:820px}
.st-oos-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-5);align-items:center}
.st-oos-row .lbl{margin:0;font-weight:var(--w-medium);font-size:var(--text-body)}
.st-oos-c{display:flex;gap:var(--s-2)}
.st-pct{width:120px}
.st-pct input{text-align:right;font-variant-numeric:tabular-nums}
.st-oos .help{margin-top:var(--s-2)}
.st-cat-h{margin-top:var(--s-10)}
.st-cat-h .st-meta{margin-top:calc(var(--s-2) * -1)}
.st-cat-h+.st-sec{margin-top:var(--s-4)}
.st-rid{font-weight:var(--w-medium)}
.st-rule{display:flex;flex-direction:column;gap:2px;padding:var(--s-1) 0}
.st-rule b{font-weight:var(--w-medium)}
.st-rule .code{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.st-by{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.st-unw .st-rule b{color:hsl(var(--muted-foreground))}
.st-en{font-size:var(--text-small)}
.st-mode{width:100%}
.st-mode.field{height:var(--control-h-sm);font-size:var(--text-small)}
.st-mode .fc-trigger{height:var(--control-h-sm);font-size:var(--text-small)}
.st-mode.ro{color:hsl(var(--muted-foreground))}
.kit-m .st-oos-row{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
.kit-m .st-pct{width:100%}
.kit-m .st-mrules{padding:0}
.kit-m .st-mrule{display:flex;flex-direction:column;gap:4px;padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.kit-m .st-mrule:last-child{border-bottom:0}
.kit-m .st-mrule-h{display:flex;align-items:center;gap:var(--s-2)}
.kit-m .st-mrule-h .r{margin-left:auto}
.kit-m .st-mrule b{font-weight:var(--w-medium);line-height:1.35}
.kit-m .st-mrule .st-ev{font-size:var(--text-micro);color:hsl(var(--muted-foreground));overflow-wrap:anywhere}
.kit-m .st-mrule .st-mode{margin-top:var(--s-2)}
.kit-m .st-mrule .st-mode .fc-trigger{height:var(--control-h-m)}
.kit-m .st-unw b{color:hsl(var(--muted-foreground))}
.kit-m .st-actbar .btn.st-w{min-width:132px}

/* ---------- profile ---------- */
.st-link{display:inline-flex;align-items:center;gap:4px;margin-top:var(--s-3);font-size:var(--text-small);font-weight:var(--w-medium);color:hsl(var(--foreground));text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3);text-underline-offset:3px}
.st-secdl{padding-top:var(--s-1)}
.st-sess{list-style:none;border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card))}
.st-sess li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.st-sess li:last-child{border-bottom:0}
.st-sess li>div{flex:1;min-width:0;display:flex;flex-direction:column}
.st-sess li b{font-weight:var(--w-medium)}
.st-sess li span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.st-sess-i{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-control);background:hsl(var(--muted));color:hsl(var(--foreground));flex:none}
.st-kbd{display:inline-flex;gap:4px}
.st-bigav{width:44px;height:44px;font-size:var(--text-body)}
.kit-m .st-mprof{display:flex;align-items:center;gap:var(--s-3)}

/* ---------- sign-in (no shell) ---------- */
.st-si{min-height:100vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:hsl(var(--background))}
.st-si-side{background:var(--sidebar-sheen);color:hsl(var(--sidebar-foreground));padding:var(--s-8) var(--s-10);display:flex;flex-direction:column;position:relative;overflow:hidden}
.st-si-side::before{content:"";position:absolute;width:640px;height:640px;left:-220px;top:-240px;background:var(--sidebar-sheen-light);pointer-events:none}
.st-si-mark{display:flex;align-items:center;gap:var(--s-3);position:relative}
.st-si-mark b{font:var(--w-semibold) var(--text-card)/1 var(--font-voice);color:hsl(var(--sidebar-accent-foreground))}
.st-si-lede{margin-top:auto;margin-bottom:auto;position:relative;max-width:44ch}
.st-si-big{font:var(--w-semibold) 40px/1.08 var(--font-voice);letter-spacing:-.02em;color:hsl(var(--sidebar-accent-foreground))}
.st-si-lede p+p{margin-top:var(--s-4);font-size:var(--text-read);line-height:1.5}
.st-si-env{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--text-small);position:relative;line-height:1.5}
.st-si-env a{color:hsl(var(--sidebar-accent-foreground))}
.st-si-env .staging{flex:none}
.st-si-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s-8);position:relative}
.st-si-q{position:absolute;top:var(--s-5);right:var(--s-5)}
.st-si-card{width:400px;max-width:100%;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);box-shadow:var(--e-pop);overflow:hidden}
.st-si-b{padding:var(--s-8) var(--s-8) var(--s-6)}
.st-si-b>div{display:flex;flex-direction:column;gap:var(--s-4)}
.st-si-t{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.st-si-s{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:calc(var(--s-3) * -1)}
.st-si-p{color:hsl(var(--muted-foreground));line-height:1.5}
.st-si-b .btn-primary{height:var(--control-h-lg,44px)}
.st-si-f{display:flex;align-items:center;justify-content:center;gap:6px;padding:var(--s-3);border-top:1px solid hsl(var(--border));background:hsl(var(--muted)/.5);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.st-si-who{display:flex;align-items:center;gap:var(--s-2);padding:6px 6px 6px 6px;border:1px solid hsl(var(--border));border-radius:var(--r-pill);font-size:var(--text-small);align-self:flex-start}
.st-si-who .avatar{width:24px;height:24px;font-size:10px}
.st-si-who .st-link{margin:0 var(--s-2) 0 var(--s-1)}
.st-si .st-link{margin-top:0}
.st-si-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:hsl(var(--muted));color:hsl(var(--foreground))}
.st-otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-2)}
.st-otp .input{text-align:center;font:var(--w-semibold) var(--text-section)/1 var(--font-code);height:52px;padding:0}
.st-si-help{margin-top:var(--s-5);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.st-sign-in .st-help-layer{left:0}
.st-sign-in .st-help-layer>.k-sheet,.st-sign-in .st-help-layer>.k-scrim{top:0}
.kit-d .st-sign-in .st-proto{bottom:var(--s-5)}
.st-si.m{display:flex;flex-direction:column}
.st-si-top{background:var(--sidebar-sheen);color:hsl(var(--sidebar-foreground));display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);flex-wrap:wrap}
.st-si-top .st-si-mark{flex:1}
.st-si-top .help-q{background:transparent;color:hsl(var(--sidebar-accent-foreground));border-color:hsl(var(--sidebar-border))}
.st-si-top .st-pcrumb{width:100%;justify-content:flex-end;padding:0;background:none;border:0}
.st-si-top .st-proto>.k-anchor>button{background:transparent;border-color:hsl(var(--sidebar-border));color:hsl(var(--sidebar-foreground))}
.st-si-top .st-proto>.k-anchor>button b{color:hsl(var(--sidebar-accent-foreground))}
.st-si.m .st-si-main{flex:1;justify-content:flex-end;align-items:stretch;padding:var(--s-6) var(--s-4) var(--s-6)}
.st-si.m .st-si-big{font-size:28px;color:hsl(var(--foreground));margin-bottom:var(--s-6)}
.st-si.m .st-si-card{width:100%}
.st-si.m .st-si-b{padding:var(--s-6) var(--s-5) var(--s-5)}
.st-si.m .st-si-b .btn{height:var(--control-h-m-lg)}
.st-si.m .st-si-help{text-align:center}
.help.st-ok{display:flex;align-items:center;gap:6px;color:hsl(var(--success))}

/* phone: skeleton rows keep two columns (label + status); the desktop grid overflowed 390 (kit v2 re-shoot) */
.kit-m .st-skrow{grid-template-columns:minmax(0,1fr) 72px!important}
.kit-m .st-skrow>:nth-child(n+3){display:none}