/* Settings (left tab list + panels). Prefix: st- */
.st-layout{gap:20px 40px;align-items:start}
.st-nav{display:grid;gap:2px;align-content:start;position:sticky;top:calc(var(--hdr) + 16px)}
.st-nav a{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:var(--r-sm);border-left:2px solid transparent;color:var(--mute);text-decoration:none}
.st-nav a span{font-weight:500;color:var(--fg)}
.st-nav a small{font-size:12px;line-height:1.3}
.st-nav a:hover{background:var(--side)}
.st-nav a[aria-current="page"]{background:var(--acc-soft);border-left-color:var(--acc)}
.st-nav a[aria-current="page"] span{color:var(--acc);font-weight:600}
.st-nav a[aria-current="page"] small{color:var(--mute)}
.st-panel{min-width:0;max-width:760px}
.st-head{margin-bottom:20px}
.st-head h2{font-size:22px;outline:none}
.st-head p{margin-top:6px}
.st-card{margin-bottom:16px}
.st-card>h3,.st-card-head h3{font-size:16px;margin-bottom:4px}
.st-card>h3+p,.st-card-head+p{margin-top:2px}
.st-card-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:6px}
.st-card-head h3{margin:0}
.st-card .form-actions{margin-top:16px}
.st-sub{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.st-sub h4{margin-bottom:10px}
.st-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.st-grid-2>.field,.st-grid-2>.field:first-child{margin-top:14px}
@media (max-width:560px){.st-grid-2{grid-template-columns:minmax(0,1fr)}}
.st-form>h3{margin-bottom:10px}
.st-form .field:first-of-type{margin-top:14px}
.st-fieldset{border:0;padding:0;margin:20px 0 0;min-width:0}
.st-fieldset legend{font-size:13px;font-weight:500;padding:0}
.st-fieldset legend:not(.sr-only){float:left;width:100%;margin-bottom:0}
.st-fieldset legend:not(.sr-only)+*{clear:both}
.st-fieldset>.help{margin:2px 0 4px}
.st-kv{margin-top:10px}
.st-kv dd{text-align:left}
.st-email-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.st-addr{overflow-wrap:anywhere}
.st-skel .card{margin-top:16px}
.st-bullets{padding-left:1.2em;margin:10px 0;display:grid;gap:4px}
.st-empty{padding:28px 16px}

/* avatar */
.st-avatar-row{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
.st-avatar-img .avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.st-avatar-body{flex:1;min-width:220px}
.st-avatar-body .help{margin:0 0 12px;max-width:52ch}
.st-avatar-body .err:empty{margin:0}

/* lists: sessions, tokens, events, connections */
.st-list{list-style:none;padding:0;margin:12px 0 0;display:grid}
.st-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line2)}
.st-row:last-child{border-bottom:0}
.st-row>.btn{flex:none}
.st-row-main{min-width:0;flex:1;display:grid;gap:3px}
.st-row-title{font-weight:500;display:flex;flex-wrap:wrap;gap:6px;align-items:center;overflow-wrap:anywhere}
.st-row-main .small{overflow-wrap:anywhere}
.st-events .st-row{justify-content:flex-start;align-items:flex-start;padding:10px 0}
.st-events .dot{margin-top:7px}
.st-scopes{display:flex;gap:6px;flex-wrap:wrap}
.st-prefix{font-size:12px}
.st-conn{padding-top:4px}
.st-conn-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r);background:var(--side);flex:none;color:var(--fg)}
@media (max-width:560px){.st-row{flex-wrap:wrap}.st-row-main{flex-basis:100%}.st-conn,.st-prefs .st-row{flex-wrap:nowrap}.st-conn .st-row-main,.st-prefs .st-row-main{flex-basis:auto}}
.st-prefs{margin-top:0}

/* tokens */
.st-fresh{border-color:var(--acc-line);background:var(--acc-soft)}
.st-fresh .input-group{margin:10px 0}
.st-fresh input{font-family:var(--mono);font-size:13px}
.st-scope-list{display:grid;gap:10px}
.st-scope{align-items:flex-start}
.st-scope input{margin-top:3px}
.code .bar .copy{font-size:12px}

/* two-factor */
.st-steps{padding-left:1.3em;display:grid;gap:24px;margin:14px 0 0}
.st-steps>li::marker{font-weight:600;color:var(--mute)}
.st-steps>li>strong{display:block;margin-bottom:2px}
.st-qr-row{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;margin-top:12px}
.st-qr{width:208px;height:208px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff;flex:none}
.st-qr svg{width:100%;height:100%}
.st-key{min-width:220px;flex:1;display:grid;gap:8px}
.st-secret{display:block;padding:10px 12px;font-size:15px;letter-spacing:.06em;overflow-wrap:anywhere;user-select:all}
.st-uri .hash{display:block;margin-top:6px;word-break:break-all}
.st-codes{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.st-codes code{display:block;padding:8px 10px;text-align:center;font-size:14px;letter-spacing:.04em;user-select:all}
.st-ack{margin-top:16px;align-items:center}

/* danger zone */
.st-danger{border-color:color-mix(in oklch,var(--bad) 45%,transparent)}
.st-danger>h3{color:var(--bad)}

/* modal */
.st-modal-intro p+p{margin-top:8px}
.st-modal form{margin:0}
.st-modal .bd .field:first-of-type{margin-top:14px}
.st-modal .au-alert .note{margin-bottom:6px}

/* notification switches */
.st-prefs .st-row{align-items:center}
.st-switch{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:44px;margin:0;cursor:pointer}
.st-switch>input[type=checkbox]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.st-switch-ui{position:relative;width:40px;height:22px;border-radius:11px;background:var(--line-strong);transition:background .15s var(--ease)}
.st-switch-ui::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--panel);transition:transform .15s var(--ease)}
.st-switch>input:checked+.st-switch-ui{background:var(--acc)}
.st-switch>input:checked+.st-switch-ui::after{transform:translateX(18px);background:var(--acc-fg)}
.st-switch>input:focus-visible+.st-switch-ui{outline:2px solid var(--acc);outline-offset:2px}
.st-prefs-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}

/* theme picker */
.st-themes+p,.st-card .code+p{margin-top:12px}
.st-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.st-theme{display:grid;gap:4px;align-content:start;padding:12px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;position:relative;font-weight:400;margin:0}
.st-theme:hover{border-color:var(--line-strong)}
.st-theme>input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.st-theme-prev{height:64px;border-radius:var(--r-sm);border:1px solid var(--line);overflow:hidden;padding-top:4px}
.st-theme-prev i{display:block;height:6px;border-radius:3px;margin:8px 10px 0}
.st-theme-prev i:nth-child(1){width:55%}.st-theme-prev i:nth-child(2){width:80%}.st-theme-prev i:nth-child(3){width:35%}
.st-prev-light{background:#f6f7f9}.st-prev-light i{background:#ccd1da}
.st-prev-dark{background:#1b1d22}.st-prev-dark i{background:#3b4049}
.st-prev-system{background:linear-gradient(105deg,#f6f7f9 50%,#1b1d22 50%)}.st-prev-system i{background:#8d95a3}
.st-theme-name{font-weight:600;margin-top:4px}
.st-theme>input:checked~.st-theme-prev{outline:2px solid var(--acc);outline-offset:2px}
.st-theme>input:checked~.st-theme-name{color:var(--acc)}
.st-theme>input:focus-visible~.st-theme-prev{outline:3px solid var(--acc);outline-offset:3px}
.st-theme:has(>input:checked){border-color:var(--acc)}
@media (max-width:520px){.st-themes{grid-template-columns:minmax(0,1fr)}}

@media (max-width:900px){
  .st-nav{display:flex;flex-wrap:wrap;gap:8px;position:static;padding-bottom:16px;border-bottom:1px solid var(--line)}
  .st-nav a{white-space:nowrap;min-height:44px;justify-content:center;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel)}
  .st-nav a small{display:none}
  .st-nav a:hover{background:var(--side)}
  .st-nav a[aria-current="page"]{border-color:var(--acc);background:var(--acc-soft)}
}
@media (max-width:720px){
  .st-layout .btn,.st-modal .btn{min-height:44px}
  .st-layout .btn.sm{min-height:44px;padding:0 14px}
  .st-layout input:not([type=checkbox]):not([type=radio]),.st-layout select,.st-modal input:not([type=checkbox]){min-height:46px}
  .st-layout .check,.st-modal .check{min-height:44px;align-items:center}
  .st-layout .check input{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){.st-switch-ui,.st-switch-ui::after{transition:none}}

/* Settings, Publisher (pages/settings/publisher.js): DNS record rows wrap on phones instead of scrolling sideways. */
.pv-form,.pv-pending{margin-top:16px}
.pv-rec dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.pv-val{word-break:break-all;min-width:0}