/* Integrations, notifications and emails designs (step 22): the extra rules in the A-Integrations, A-Int-*, A-Notifications,
   A-Emails and A-EmailEdit style block (the rest is already in control.css). Copied as-is, except: the .ctl control row is
   scoped to an .intg wrapper, because control.css uses .ctl as a page wrapper on other pages. */
.keyrow{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.keyrow:last-child{border-bottom:0}
.keyrow__l{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);font-size:var(--fs-md);font-weight:var(--fw-bold)}
.keyrow__l small{font-weight:var(--fw-reg);color:var(--muted);font-size:var(--fs-sm)}
.keyin{display:flex;gap:var(--s2);align-items:center}
.keyin .input{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-sm);background:#FAFAFA}
.keyin .input.keyempty{background:#fff;color:#A1A1AA;font-family:var(--font)}
.keyin .iconbtn2{width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r);background:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;color:#4A4560}
.locknote{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--fs-sm);color:#4A4560;background:#FAFAFA;border-radius:var(--r);padding:var(--s3) var(--s3)}
.health{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.hcell{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.hcell span{font-size:var(--fs-sm);color:var(--muted)}.hcell b{font-size:var(--fs-lg);letter-spacing:-.01em}
.steps2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3);counter-reset:s}
.steps2 li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3);font-size:var(--fs-md);line-height:1.45;counter-increment:s}
.steps2 li::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.intg .ctl{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.intg .ctl>.ctl__t{flex:1 1 200px;min-width:0}
.intg .ctl>.val{max-width:100%;min-width:0;text-overflow:ellipsis}
.intg .ctl:last-child{border-bottom:0}
.ctl__t{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-md);font-weight:var(--fw-bold)}
.ctl__t small{font-weight:var(--fw-reg);color:var(--muted);font-size:var(--fs-sm)}
.intg .ctl .val{height:36px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r);background:#fff;font:inherit;font-size:var(--fs-md);font-weight:var(--fw-bold);display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap}
.isum{display:flex;gap:var(--s2);flex-wrap:wrap}
.icard2{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);text-decoration:none;color:inherit}
.icard2__top{display:flex;gap:var(--s3);align-items:flex-start}
.icard2__m{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.icard2__m strong{font-size:var(--fs-md)}
.icard2__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);border-top:1px solid #F1F1F3;padding-top:var(--s3);font-size:var(--fs-sm);color:var(--muted)}
.mtx{width:100%;border-collapse:collapse;font-size:var(--fs-md);background:#fff}
.mtx th{font-size:var(--fs-sm);color:var(--muted);font-weight:var(--fw-bold);text-align:center;padding:var(--s3) var(--s2);border-bottom:1px solid var(--line);white-space:nowrap}
.mtx th:first-child{text-align:left;padding-left:var(--s4)}
.mtx td{padding:var(--s3) var(--s2);border-bottom:1px solid var(--line);text-align:center}
.mtx td:first-child{text-align:left;padding-left:var(--s4)}
.mtx td:first-child small{display:block;color:var(--muted);font-size:var(--fs-sm)}
.mtx tr.grp td{background:#FAFAFA;font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:#71717A;padding:var(--s2) var(--s4)}
.dot{display:inline-flex;width:22px;height:22px;border-radius:6px;align-items:center;justify-content:center}
.dot--on{background:var(--accent)}.dot--off{background:#F4F4F5;color:#A1A1AA}.dot--lock{background:#17142B;color:var(--accent)}.dot--na{color:#D4D4D8}
.tagchip{display:inline-flex;align-items:center;height:30px;padding:0 var(--s3);border-radius:var(--r);background:#F4F4F5;font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-sm);border:0}
.edbox{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:var(--s3);font-size:var(--fs-md);line-height:1.6;min-height:120px}
.edbox .tg{background:#E3FBF3;border:1px solid #7CF5C4;border-radius:4px;padding:0 var(--s1);font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-sm)}
.edtool{display:flex;gap:var(--s1);border:1px solid var(--line);border-bottom:0;border-radius:var(--r) var(--r) 0 0;padding:var(--s2);background:#FAFAFA}
.edtool button{height:30px;min-width:30px;border:0;background:transparent;border-radius:4px;font:inherit;font-weight:var(--fw-bold);font-size:var(--fs-sm);color:#4A4560}
.edtool + .edbox{border-radius:0 0 var(--r) var(--r)}
.prevwrap{background:#EEF0EA;border-radius:var(--r);padding:var(--s4);display:flex;justify-content:center}
.prevwrap .em{width:100%;max-width:380px}
.smsprev{background:#fff;border-radius:18px;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);width:100%;max-width:340px}
.bub{align-self:flex-start;background:#E9E9EB;border-radius:16px 16px 16px 4px;padding:var(--s3) var(--s4);font-size:var(--fs-md);line-height:1.45;max-width:90%}
.bub--wa{background:#DCF8C6}
.pushprev{background:rgba(255,255,255,.92);border-radius:16px;padding:var(--s3) var(--s4);display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--s3);width:100%;max-width:340px;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.pushprev i{width:36px;height:36px;border-radius:8px;background:#17142B;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);font-style:normal;font-weight:var(--fw-bold)}
.dns{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.dns:last-child{border-bottom:0}
@media (max-width:767px){.health{grid-template-columns:repeat(2,minmax(0,1fr))}.mtx th,.mtx td{padding:var(--s2) var(--s1)}.mtx td:first-child,.mtx th:first-child{padding-left:var(--s3)}.dns{grid-template-columns:56px minmax(0,1fr)}.dns>:last-child{grid-column:2}}