/* Qistas Connector documentation — site shell, reference-document body */

.cx-head{padding-bottom:64px}
.cx-head .lead{max-width:62ch;margin-top:18px;color:#c8d9f0}
.cx-head .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:40px 0 0;
  border-top:1px solid rgba(255,255,255,.18)}
.cx-head .facts > div{padding:16px 22px 0 0}
.cx-head .facts > div + div{padding-inline-start:22px;border-inline-start:1px solid rgba(255,255,255,.12)}
.cx-head .facts dt{font-family:var(--disp);font-weight:500;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--spark)}
.cx-head .facts dd{margin:6px 0 0;font-size:14px;line-height:1.5;color:#fff}
.cx-head .facts dd.url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all}
html[dir="rtl"] .cx-head .facts dt{font-family:var(--disp-ar);font-size:12px;letter-spacing:0;text-transform:none}

.cx-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;padding-top:64px;padding-bottom:110px;align-items:start}

.cx-shell .toc{position:sticky;top:100px}
.cx-shell .toc h2{font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--spark-ink);margin:0 0 12px}
.cx-shell .toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;border-top:1px solid var(--line)}
.cx-shell .toc li{counter-increment:toc;border-bottom:1px solid var(--line)}
.cx-shell .toc a{display:grid;grid-template-columns:24px 1fr;gap:6px;padding:10px 0;font-size:13.5px;
  color:var(--slate);text-decoration:none;transition:color .15s}
.cx-shell .toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--disp);font-size:11px;
  color:var(--muted);padding-top:2px}
.cx-shell .toc a:hover{color:var(--spark-deep)}
html[dir="rtl"] .cx-shell .toc h2{font-family:var(--disp-ar);font-size:13px;letter-spacing:0;text-transform:none}

.cx-main{min-width:0;max-width:760px}
.cx-main section{padding:0 0 52px;margin:0 0 52px;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.cx-main section:last-of-type{border-bottom:0;margin-bottom:0}
.cx-main h2.cx-sec{display:flex;align-items:baseline;gap:14px;margin:0 0 18px;font-family:var(--disp);font-weight:500;
  font-size:clamp(21px,2.2vw,27px);color:var(--head);letter-spacing:-.018em;line-height:1.25}
.cx-main h2.cx-sec .n{font-family:var(--disp);font-weight:400;font-size:12px;letter-spacing:.12em;color:var(--spark-deep)}
.cx-main h3{margin:30px 0 10px;font-family:var(--disp);font-weight:500;font-size:16px;color:var(--head);letter-spacing:-.008em}
.cx-main p,.cx-main li{font-size:15px;line-height:1.75;color:var(--slate);text-align:start}
.cx-main p{margin:0 0 14px}
.cx-main strong{font-weight:600;color:var(--head)}
.cx-main ul,.cx-main ol{margin:0 0 16px;padding-inline-start:20px}
.cx-main li{margin-bottom:6px}
.cx-main ul{list-style:disc}
.cx-main ol:not(.steps){list-style:decimal}
.cx-main li::marker{color:var(--spark-deep)}
.cx-main a{color:var(--spark-deep)}
.cx-main a:hover{color:var(--navy)}
html[dir="rtl"] .cx-main h2.cx-sec,html[dir="rtl"] .cx-main h3{font-family:var(--disp-ar);font-weight:600;letter-spacing:0}
html[dir="rtl"] .cx-main p,html[dir="rtl"] .cx-main li{font-size:15.5px;line-height:1.95}

.cx-main code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;color:var(--spark-ink);
  background:var(--alt);border:1px solid var(--line);border-radius:4px;padding:1px 6px;white-space:nowrap}
.cx-main .ltr{direction:ltr;unicode-bidi:isolate}

.cx-main .scroll{overflow-x:auto;margin:0 0 18px}
.cx-main table{width:100%;border-collapse:collapse;font-size:14px}
.cx-main caption{caption-side:top;text-align:start;font-family:var(--disp);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-bottom:10px}
.cx-main thead th{text-align:start;font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--head)}
.cx-main tbody th,.cx-main tbody td{text-align:start;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line);
  line-height:1.6;color:var(--slate)}
.cx-main tbody th{font-weight:500;color:var(--head);width:34%}
.cx-main thead th:first-child,.cx-main tbody th:first-child,.cx-main tbody td:first-child{padding-inline-start:0}
html[dir="rtl"] .cx-main caption,html[dir="rtl"] .cx-main thead th{font-family:var(--disp-ar);font-size:12.5px;letter-spacing:0;text-transform:none}

.cx-main .note{margin:6px 0 18px;padding:18px 22px;background:var(--alt);border:1px solid var(--line);
  border-inline-start:3px solid var(--spark-deep);border-radius:6px}
.cx-main .note.gold{border-inline-start-color:var(--navy);background:#f3f6fb}
.cx-main .note p:last-child{margin-bottom:0}

.cx-main ol.steps{list-style:none;padding:0;counter-reset:st;margin:0 0 18px;border-top:1px solid var(--line)}
.cx-main ol.steps li{counter-increment:st;display:grid;grid-template-columns:34px 1fr;gap:10px;margin:0;
  padding:12px 0;border-bottom:1px solid var(--line)}
.cx-main ol.steps li::before{content:counter(st,decimal-leading-zero);font-family:var(--disp);font-size:12px;
  color:var(--spark-deep);padding-top:3px}

.cx-main .ask{padding:12px 16px;margin:0 0 10px;background:#fff;border:1px solid var(--line);border-radius:10px;
  font-style:italic;color:var(--head)}
.cx-main .ask[dir="rtl"]{font-style:normal}

.cx-updated{margin-top:40px !important;font-size:12.5px !important;color:var(--muted) !important}

@media(max-width:1000px){
  .cx-head .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-head .facts > div:nth-child(3){padding-inline-start:0;border-inline-start:0}
  .cx-shell{grid-template-columns:1fr;gap:36px}
  .cx-shell .toc{position:static}
}
@media(max-width:620px){
  .cx-head .facts{grid-template-columns:1fr}
  .cx-head .facts > div + div{padding-inline-start:0;border-inline-start:0}
}

/* isolate Latin runs inside Arabic text everywhere on the page */
.ltr{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .cx-head h1{font-family:var(--disp-ar)}
html[dir="rtl"] .cx-head h1 .ltr{font-family:var(--disp)}
html[dir="rtl"] .cx-main tbody th{width:30%}

/* steps: keep each item's text as one inline run; number sits in the gutter */
.cx-main ol.steps li{display:block;position:relative;padding-inline-start:44px}
.cx-main ol.steps li::before{position:absolute;inset-inline-start:0;top:15px;padding-top:0}
.cx-main code{white-space:normal;word-break:break-all}

/* number shares the first text line: inline, hung into the gutter */
.cx-main ol.steps li::before{position:static;display:inline-block;width:44px;
  margin-inline-start:-44px;top:auto;vertical-align:baseline}

/* code chips stay on one line; only the server URL may break */
.cx-main code{white-space:nowrap;word-break:normal}
.cx-main ol.steps code,.cx-main p code{white-space:normal;overflow-wrap:anywhere}
.cx-main td:first-child code{white-space:nowrap}