/* 19Keys connector status: the public integration board and the member connections panel.
   Drops into /connect (or the front page block). Reads the page's .cx color variables when present,
   with the same values as fallbacks, so it also works on its own. Plain CSS, no framework. */

.ks{
  --ks-bg:var(--cx-bg,#0b0b0d);
  --ks-card:var(--cx-card,#121215);
  --ks-line:var(--cx-line,#2a2a30);
  --ks-text:var(--cx-text,#f4f4f6);
  --ks-muted:var(--cx-muted,#a1a1aa);
  --ks-gold:var(--cx-gold,#E8CE7A);
  --ks-gold-deep:var(--cx-gold-deep,#A49358);
  --ks-ok:#9be7b0;
  --ks-fail:#f4a99f;
  --ks-fail-bar:#e5705f;
  --ks-radius:var(--cx-radius,22px);
  --ks-mono:"Chivo Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ks-ease:cubic-bezier(.2,0,0,1);
  position:relative;
  margin:0 auto 26px;
  border:1px solid var(--ks-line);
  border-radius:var(--ks-radius);
  background:radial-gradient(120% 70% at 50% 0%,rgba(232,206,122,.07),transparent 60%),var(--ks-card);
  color:var(--ks-text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-align:left;
  overflow:hidden;
}
.ks--member{max-width:760px}
.ks--board{margin-top:34px}
.ks[hidden]{display:none}
.ks *,.ks *::before,.ks *::after{box-sizing:border-box}
.ks p{margin:0}

/* header */
.ks-head{padding:20px 22px 18px;border-bottom:1px solid var(--ks-line)}
.ks-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px}
.ks-head-text{min-width:0;flex:1 1 260px}
.ks-eyebrow{margin:0 0 6px !important;color:var(--ks-gold);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ks-title{font-size:1.2rem;font-weight:650;letter-spacing:-.01em;line-height:1.25;margin:0}
.ks-meta{margin-top:4px !important;color:var(--ks-muted);font-size:.86rem;line-height:1.45}

/* buttons: gold chip, matching the page's .cx-chip */
.ks-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;
  border-radius:10px;border:1px solid rgba(232,206,122,.55);background:transparent;color:var(--ks-gold);
  font:600 .82rem/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-decoration:none;white-space:nowrap;
  cursor:pointer;transition:background-color .12s var(--ks-ease),border-color .12s var(--ks-ease),transform .06s var(--ks-ease)}
.ks-btn:hover{background:rgba(232,206,122,.1)}
.ks-btn:active{transform:scale(.98)}
.ks-btn:focus-visible,.ks-details summary:focus-visible{outline:2px solid var(--ks-gold);outline-offset:2px}
.ks-btn--quiet{border-color:var(--ks-line);color:var(--ks-text)}
.ks-btn--quiet:hover{border-color:#48484d;background:rgba(255,255,255,.04)}
.ks-btn[disabled]{cursor:progress;opacity:.75}
.ks-btn svg{flex:none}

/* stat strip, ported from the Integrations 6 stat grid */
.ks-stats{margin-top:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--ks-line);border-radius:14px;overflow:hidden}
.ks-stat{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px 14px;border-left:1px solid var(--ks-line)}
.ks-stat:first-child{border-left:0}
.ks-stat-label{font-size:.78rem;font-weight:600;line-height:1.25}
.ks-stat-value{font:500 1.3rem/1.15 var(--ks-mono);font-variant-numeric:tabular-nums;color:var(--ks-text)}

/* tones: words always carry the meaning, color only reinforces it */
.ks-tone-ok{color:var(--ks-ok)}
.ks-tone-run{color:var(--ks-gold)}
.ks-tone-fail{color:var(--ks-fail)}
.ks-tone-idle{color:var(--ks-muted)}

/* rows */
.ks-list{list-style:none;margin:0;padding:16px 22px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ks-row{min-width:0;padding:14px;border:1px solid var(--ks-line);border-radius:12px;background:rgba(255,255,255,.015)}
.ks-row.is-fail{border-color:rgba(244,169,159,.35)}
.ks-row-main{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.ks-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;
  border:1px solid var(--ks-line);background:var(--ks-bg);color:var(--ks-text);font:500 .68rem/1 var(--ks-mono);letter-spacing:.04em}
.ks-names{flex:1 1 220px;min-width:0}
.ks-name-line{display:flex;align-items:center;gap:8px;min-width:0}
.ks-name{flex:none;font-weight:600;font-size:.95rem}
.ks-arrow{flex:none;color:var(--ks-muted)}
.ks-target{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ks-muted);font:.76rem/1.3 var(--ks-mono)}
.ks-caption{margin-top:3px !important;display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--ks-muted);font-size:.78rem;line-height:1.4;font-variant-numeric:tabular-nums}
.ks-when{flex:none;min-width:8.5rem;white-space:nowrap;text-align:right;color:var(--ks-muted);font-size:.8rem}
.ks-act{flex:none;display:flex;justify-content:flex-end;min-width:5.75rem}
.ks-when-sm{display:none}
.ks-state{flex:none;display:inline-flex;align-items:center;gap:6px;min-width:8.6rem;font-size:.84rem;font-weight:600;line-height:1.2}
.ks-state svg{flex:none}

/* progress */
.ks-track{position:relative;display:block;height:4px;margin-top:12px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.ks-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ks-gold-deep),var(--ks-gold));transition:width .4s var(--ks-ease)}
.ks-fill--ok{background:var(--ks-ok)}
.ks-fill--fail{background:var(--ks-fail-bar)}

/* notes and checklists */
.ks-note{margin-top:10px !important;display:flex;align-items:flex-start;gap:8px;color:var(--ks-fail);font-size:.84rem;line-height:1.45}
.ks-note svg{flex:none;margin-top:1px}
.ks-details{margin-top:10px}
.ks-details summary{display:inline-flex;align-items:center;min-height:24px;gap:6px;cursor:pointer;color:var(--ks-muted);font-size:.8rem;font-weight:600;border-radius:6px;list-style:none}
.ks-details summary::-webkit-details-marker{display:none}
.ks-details summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .12s var(--ks-ease)}
.ks-details[open] summary::before{transform:rotate(45deg)}
.ks-details summary:hover{color:var(--ks-text)}
.ks-checks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.ks-check{display:flex;align-items:flex-start;gap:8px;color:var(--ks-muted);font-size:.84rem;line-height:1.4}
.ks-check svg{flex:none;margin-top:1px}
.ks-check.is-done{color:var(--ks-text)}
.ks-check.is-done svg{color:var(--ks-ok)}

/* empty, loading and signed out states */
.ks-empty{color:var(--ks-muted);font-size:.88rem}
.ks-empty--pad{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px}
.ks-inline{display:inline-flex;align-items:center;gap:8px}

/* footer health line, ported from "Warehouse reachable · Checked 30 seconds ago" */
.ks-foot{display:flex;align-items:center;gap:8px;padding:10px 22px;border-top:1px solid var(--ks-line);color:var(--ks-muted);font-size:.8rem}
.ks-foot svg{flex:none}
.ks-foot.is-fail{color:var(--ks-fail)}
.ks-foot-words{display:flex;flex-wrap:wrap;gap:2px 12px}

/* spinner */
.ks-spin{flex:none;display:inline-block;width:10px;height:10px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:ks-spin .8s linear infinite}
@keyframes ks-spin{to{transform:rotate(360deg)}}

.ks-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:640px){
  .ks-when{display:none}
  .ks-when-sm{display:inline}
  .ks-state{min-width:0}
}
@media (max-width:560px){
  .ks-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ks-stat:nth-child(odd){border-left:0}
  .ks-stat:nth-child(n+3){border-top:1px solid var(--ks-line)}
}
@media (max-width:520px){
  .ks-head{padding:16px 14px}
  .ks-list{padding:12px 14px}
  .ks-foot{padding:10px 14px}
  .ks-empty--pad{padding:18px 14px}
  .ks-row{padding:12px}
  .ks-act{flex:1 1 100%;min-width:0}
  .ks-act:empty{display:none}
  .ks-act .ks-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ks-spin{animation:none;border-top-color:currentColor;opacity:.55}
  .ks-fill,.ks-btn,.ks-details summary::before{transition:none}
  .ks-btn:active{transform:none}
}