/* The client library on /docs/: filter chips, a grid of clients, one recipe at a time.
   Generated markup: scripts/connect-library.mjs. Tokens are the page's own (app.css). */
.cl{margin-top:26px}
.cl-filters{display:flex;flex-wrap:wrap;gap:8px}
.cl-filters button{font-family:var(--sans);font-size:calc((13.5px) * var(--ts));color:var(--dim);
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.cl-filters button:hover{border-color:var(--line2);color:var(--txt)}
.cl-filters button[aria-pressed="true"]{background:var(--txt);border-color:var(--txt);color:var(--bg)}
.cl-n{font-family:var(--mono);font-size:calc((11.5px) * var(--ts));opacity:.7}

.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-top:18px}
.cl-client{display:flex;align-items:center;gap:10px;text-align:left;font-family:var(--sans);
  font-size:calc((14px) * var(--ts));color:var(--txt);background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;cursor:pointer;min-height:48px}
.cl-client:hover{border-color:var(--line2)}
.cl-client[aria-selected="true"]{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint) inset}
.cl-client[hidden]{display:none}
.cl-glyph{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border-radius:8px;background:var(--card2);border:1px solid var(--line)}
.cl-img{display:block;width:20px;height:20px}
.cl-img-dark{display:none}
[data-theme="night"] .cl-img-light{display:none}
[data-theme="night"] .cl-img-dark{display:block}
.cl-mono{font-family:var(--mono);font-size:calc((11px) * var(--ts));font-weight:600;color:var(--dim2);letter-spacing:.02em}
.cl-name{line-height:1.25}

.cl-recipes{margin-top:22px}
.cl-recipe{display:none;border:1px solid var(--line);border-radius:14px;padding:18px 20px 20px;background:transparent}
.cl-recipe.is-on{display:block}
html:not(.cl-js) .cl-recipe{display:block;margin-bottom:16px}
html:not(.cl-js) .cl-filters,html:not(.cl-js) .cl-grid{display:none}
.cl-rhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cl-rhead strong{font-family:var(--sans);font-size:calc((16px) * var(--ts));font-weight:600;color:var(--txt)}
.cl-gets{display:inline-flex;flex-wrap:wrap;gap:6px}
.cl-gets span{font-family:var(--mono);font-size:calc((11px) * var(--ts));letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim2);border:1px solid var(--line);border-radius:6px;padding:3px 7px}
.cl-guide{margin-left:auto;font-family:var(--sans);font-size:calc((13.5px) * var(--ts));color:var(--mint);
  text-decoration:underline;text-underline-offset:3px}

.cl-auth{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.cl-authcard{text-align:left;font-family:var(--sans);background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;cursor:pointer;color:var(--txt)}
.cl-authcard:hover:not([disabled]){border-color:var(--line2)}
.cl-authcard[aria-pressed="true"]{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint) inset}
.cl-authcard[disabled]{cursor:not-allowed;opacity:.62}
.cl-authcard b{display:block;font-size:calc((14.5px) * var(--ts));font-weight:600;margin-bottom:6px}
.cl-authcard b em{font-style:normal;font-family:var(--mono);font-size:calc((10px) * var(--ts));letter-spacing:.1em;
  text-transform:uppercase;color:var(--mint);border:1px solid var(--line);border-radius:5px;padding:2px 6px;margin-left:6px;vertical-align:2px}
.cl-authcard ul{margin:0;padding-left:18px;font-size:calc((13px) * var(--ts));color:var(--dim);line-height:1.5}
.cl-authcard p{font-size:calc((13px) * var(--ts));color:var(--faint);margin:0}
.cl-faint{color:var(--faint)}

.cl-block{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.cl-block[hidden]{display:none}
.cl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--card2)}
.cl-file{font-family:var(--mono);font-size:calc((12.5px) * var(--ts));color:var(--txt)}
.cl-hint{font-family:var(--sans);font-size:calc((12.5px) * var(--ts));color:var(--faint)}
.cl-copy{margin-left:auto;font-family:var(--sans);font-size:calc((12.5px) * var(--ts));color:var(--dim);background:transparent;
  border:1px solid var(--line2);border-radius:999px;padding:4px 11px;cursor:pointer}
.cl-copy:hover{color:var(--txt);border-color:var(--txt)}
.cl-copy.is-done{color:var(--mint);border-color:var(--mint)}
.cl-code{margin:0;padding:13px 14px;font-family:var(--mono);font-size:calc((13px) * var(--ts));line-height:1.5;color:var(--dim);
  white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto}
.cl-key{color:var(--mint);font-weight:600}

.cl-note{margin-top:14px;font-family:var(--sans);font-size:calc((13.5px) * var(--ts));line-height:1.5;color:var(--dim);
  border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:11px 14px}
.cl-note strong,.cl-note b{color:var(--txt);font-weight:600}

.cl-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px}
.cl-cta .btn{gap:8px}
.cl-why{font-family:var(--sans);font-size:calc((13.5px) * var(--ts));color:var(--dim2);max-width:46em}

@media (max-width:640px){
  .cl-auth{grid-template-columns:1fr}
  .cl-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}