/* /software/command/integrations/ — drawn hero, connection plates, directory.

   The filter chips are .fchip, not .chip: pylon-mockups.css defines .chip for
   framework chips, which this page uses inside the CC6.1 plate. Page CSS loads
   second, so the directory's rules were silently restyling them. */
/* page: integrations */
body{--acc:var(--indigo);--acc-txt:var(--indigo-txt)}
.stmt{grid-column:1/11;font-size:clamp(1.5rem,3.1vw,2.5rem);font-weight:500;letter-spacing:-.04em;line-height:1.14;color:var(--fade);text-wrap:pretty}
.stmt b{color:var(--t1);font-weight:500}
@media(max-width:1024px){.stmt{grid-column:1/-1}}
/* hero: Program metrics, read from live connections.
   The card grid absorbs all spare height so the screen fills any frame. */
.hero-r{container-type:inline-size}
.hero-r .mk{position:absolute;inset:0;border:0}
/* the drawn screen runs off the bottom edge, the way a real one does */
.hero-r .mk-b{overflow:hidden;justify-content:flex-start}
/* no left fade: the drawn screen has its own border, and a fade over it just
   dims the text while the saturated connector logos punch through as dots */
.hero-r::after{background:linear-gradient(0deg,rgba(10,10,12,.4),transparent 12%)}
.pm-h{display:flex;align-items:baseline;justify-content:space-between;gap:1.5em;flex:none}
.pm-h b{font-size:1.15em;font-weight:500;color:var(--t1);letter-spacing:-.025em;white-space:nowrap}
.pm-h span{font-family:var(--mono);font-size:.74em;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);white-space:nowrap}
.pm-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em;flex:none}
.pm-c{border:1px solid var(--rule-2);background:#101014;padding:.85em;display:flex;flex-direction:column;gap:.5em;min-width:0;min-height:0}
.pm-t{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;min-width:0;flex:none}
.pm-t>span{font-size:.9em;color:var(--t3);line-height:1.3}
.pm-d{font-family:var(--mono);font-size:.76em;white-space:nowrap;flex:none}
.pm-d.up{color:#4fc98a}
.pm-d.dn{color:#ff7a6b}
.pm-n{font-size:1.85em;font-weight:500;letter-spacing:-.045em;color:var(--t1);line-height:1;flex:none}
.pm-spark{height:1.7em;width:100%;display:block;flex:none}
.pm-st{display:flex;align-items:center;gap:.5em;font-size:.86em;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.pm-st i{width:.42em;height:.42em;border-radius:50%;background:currentColor;flex:none}
.pm-st .ok{color:#4fc98a;display:inline-flex;align-items:center;gap:.45em}
.pm-st .no{color:#ff7a6b;display:inline-flex;align-items:center;gap:.45em}
.pm-src{display:flex;align-items:center;gap:.5em;padding-top:.15em;font-family:var(--mono);font-size:.72em;color:var(--t4);min-width:0;flex:none}
.pm-src img{width:1.05em;height:1.05em;object-fit:contain;flex:none}
.pm-src span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-s{display:flex;align-items:baseline;justify-content:space-between;gap:1.5em;flex:none;padding-top:.2em}
.pm-s b{font-family:var(--mono);font-size:.76em;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);font-weight:500}
.pm-s em{font-style:normal;font-family:var(--mono);font-size:.74em;color:#ff7a6b}
/* the list takes any surplus height (rows share it) and clips when there is none */
.pm-l{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.pm-r{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1em;padding:.75em 0 .75em .85em;border-bottom:1px solid var(--rule-3);border-left:2px solid #ff7a6b;flex:1 0 auto}
.pm-r b{display:block;font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-r i{display:block;font-style:normal;font-size:.86em;color:var(--t4);margin-top:.15em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-r i u{text-decoration:none;font-family:var(--mono);font-size:.94em}
.pm-r .go{font-family:var(--mono);font-size:.8em;color:var(--t4);white-space:nowrap}
.pm-r .go u{text-decoration:none;color:#ff7a6b}
@container (max-width:560px){.pm-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Monitoring > Connections, from assets/command/site_home_slider/Security Tech Connections.png */
.cn-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1em;flex:none}
.cn-add{font-family:var(--mono);font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-txt);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);padding:.45em .7em;white-space:nowrap;flex:none}
.cn-tabs{display:flex;gap:1.5em;border-bottom:1px solid var(--rule-2);flex:none;margin-top:.2em}
.cn-tabs span{padding-bottom:.65em;font-size:.95em;color:var(--t4);border-bottom:1.5px solid transparent;margin-bottom:-1px;white-space:nowrap}
.cn-tabs span.on{color:var(--t1);border-bottom-color:var(--acc-txt)}
.cn-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em;flex:1;min-height:0}
.cn-c{border:1px solid var(--rule-2);background:#101014;padding:.85em;display:flex;flex-direction:column;gap:.5em;min-width:0}
.cn-h{display:flex;align-items:center;gap:.6em;min-width:0}
.cn-h img{width:1.5em;height:1.5em;object-fit:contain;flex:none}
.cn-h b{font-size:1.02em;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-h .pill{margin-left:auto;font-size:.84em;flex:none}
.cn-p{font-size:.92em;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-s{margin-top:auto;padding-top:.4em;font-family:var(--mono);font-size:.74em;color:var(--t4)}
@container (max-width:620px){.cn-g{grid-template-columns:repeat(2,minmax(0,1fr))}.cn-tabs{gap:1em;font-size:.9em}}
@container (max-width:420px){.cn-g{grid-template-columns:1fr}}
.ct-m{display:flex;gap:.6em;flex-wrap:wrap;align-items:center}
.under{margin-top:clamp(1.75rem,3vw,2.75rem);row-gap:2rem}
.u-l{grid-column:1/6}
.u-r{grid-column:7/13}
@media(max-width:1024px){.u-l,.u-r{grid-column:1/-1}}
.u-l b{display:block;font-size:1.25rem;font-weight:500;letter-spacing:-.03em;color:var(--t1);margin-bottom:.625rem}
.u-l p{font-size:.9375rem;line-height:1.6;color:var(--t3);max-width:38ch}
.u-r .big{font-size:clamp(1.25rem,2vw,1.625rem);font-weight:500;letter-spacing:-.035em;line-height:1.22;color:var(--t1);margin-bottom:1rem;max-width:20ch}
/* the three steps */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--rule)}
@media(max-width:900px){.flow{grid-template-columns:1fr;gap:2.25rem}}
.flow div{padding-top:1.5rem;border-top:1px solid transparent;margin-top:-1px}
.flow .k{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc-txt);margin-bottom:1rem}
.flow h3{font-size:1.25rem;font-weight:500;letter-spacing:-.03em;color:var(--t1);margin-bottom:.625rem}
.flow p{font-size:.9375rem;line-height:1.6;color:var(--t3);max-width:36ch}
/* directory */
.tools{display:flex;justify-content:space-between;align-items:flex-end;gap:1.25rem;flex-wrap:wrap;margin-top:clamp(2.5rem,4vw,3.5rem);padding-bottom:1.25rem;border-bottom:1px solid var(--rule)}
.chips{display:flex;flex-wrap:wrap;gap:.375rem;flex:1 1 24rem;min-width:0}
.fchip{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);border:1px solid var(--rule-2);padding:.5rem .7rem;transition:color .25s,border-color .25s,background .25s}
.fchip:hover{color:var(--t2);border-color:var(--rule)}
.fchip[aria-pressed="true"]{color:var(--ink);background:var(--t1);border-color:var(--t1)}
.fchip b{font-weight:400;margin-left:.5em;opacity:.55}
.srch{display:flex;align-items:center;gap:.6rem;border:1px solid var(--rule-2);padding:0 .8rem;min-width:min(260px,100%);color:var(--t4);transition:border-color .25s}
.srch:focus-within{border-color:var(--rule)}
.srch svg{width:14px;height:14px;flex:none}
.srch input{background:none;border:0;outline:none;color:var(--t1);font-family:inherit;font-size:.875rem;padding:.75rem 0;width:100%}
.srch input::placeholder{color:var(--t4)}
.dir{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);border-top:0;margin-bottom:1.5rem}
@media(max-width:900px){.dir{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.dir{grid-template-columns:1fr}}
.dc{background:var(--ink);padding:1.5rem 1.375rem;display:flex;flex-direction:column;gap:.875rem;transition:background .3s var(--e)}
.dc:hover{background:var(--ink-2)}
.dc[hidden]{display:none}
.dc-t{display:flex;align-items:center;gap:.875rem;min-width:0}
.dc-l{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule-2);background:var(--ink-2)}
.dc-l img{width:20px;height:20px;object-fit:contain;filter:grayscale(1) opacity(.65);transition:filter .35s}
.dc:hover .dc-l img{filter:none}
.dc-n{font-size:.9375rem;font-weight:500;letter-spacing:-.02em;color:var(--t1);line-height:1.25}
.dc-c{display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);margin-top:.375rem}
.dc-d{font-size:.8125rem;line-height:1.55;color:var(--t3)}
.dir-f{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--t4)}
.dir-none{padding:4rem 1rem;text-align:center;color:var(--t3);font-size:.9375rem;grid-column:1/-1;background:var(--ink)}
.dir-none[hidden]{display:none}