/* Integration directory: native modal, shared catalog and theme-aware surfaces. */
.integrations-dialog {
  --directory-bg:#101520; --directory-aside:#151c2a; --directory-ink:#f0f3fa;
  --directory-muted:#9cabc1; --directory-line:#ffffff12; --directory-card:#ffffff03;
  --directory-accent:#a5aff3;
  width:min(1060px,calc(100% - 48px)); max-width:none; height:min(740px,calc(100dvh - 48px));
  max-height:none; padding:0; border:1px solid var(--directory-line); border-radius:24px;
  background:var(--directory-bg); color:var(--directory-ink); overflow:hidden;
  box-shadow:0 40px 120px #0005; font-family:var(--font-body);
}
:root .integrations-dialog {
  --directory-bg:#fff; --directory-aside:#f3f6fb; --directory-ink:#20283b;
  --directory-muted:#657187; --directory-line:#e1e7ef; --directory-card:#fbfcfe;
  --directory-accent:#555ae8;
}
.integrations-dialog::backdrop { background:#0c142b75; backdrop-filter:blur(10px); transition:opacity 180ms ease; }
.integrations-dialog.is-closing::backdrop { opacity:0; }
.integrations-dialog[open] { animation:directory-enter .22s ease-out; }
.directory-layout { display:grid; grid-template-columns:290px minmax(0,1fr); height:100%; }
.directory-aside {
  position:relative; display:flex; flex-direction:column; padding:38px 30px 30px;
  background:radial-gradient(ellipse at 10% 15%,#858be322,transparent 65%),var(--directory-aside);
  border-right:1px solid var(--directory-line); overflow:hidden;
}
.directory-eyebrow { margin:0; font-size:11px; line-height:1.5; font-weight:500; letter-spacing:.17em; color:var(--directory-muted); }
.directory-eyebrow::before { content:''; display:inline-block; width:6px; height:6px; margin-right:10px; border-radius:50%; background:var(--directory-accent); vertical-align:2px; }
.directory-total { display:block; margin:36px 0 4px; font-size:116px; line-height:1.08; font-weight:500; letter-spacing:-.07em; color:#91a4c8; background:linear-gradient(125deg,#526b92 5%,#b3c3dc 42%,#6680a8 62%,#394e72 95%); background-clip:text; -webkit-text-fill-color:transparent; }
.directory-aside h2 { margin:0; font-size:30px; line-height:1.18; font-weight:400; letter-spacing:-.04em; }
.directory-intro { margin:18px 0 28px; font-size:14px; line-height:1.75; color:var(--directory-muted); }
.directory-help { margin-top:auto; padding-top:24px; border-top:1px solid var(--directory-line); }
.directory-help h3 { margin:0 0 9px; font-size:15px; font-weight:500; }
.directory-help p { margin:0 0 18px; color:var(--directory-muted); font-size:13px; line-height:1.7; }
.directory-help a { display:flex; align-items:center; justify-content:space-between; min-height:44px; color:var(--directory-accent); font-size:14px; font-weight:500; text-decoration:none; }
.directory-help a:hover { text-decoration:underline; }
.directory-main { min-width:0; min-height:0; display:flex; flex-direction:column; }
.directory-header { padding:38px 34px 20px; }
.directory-header h3 { margin:0 48px 6px 0; font-size:25px; font-weight:400; letter-spacing:-.035em; }
.directory-header > p { margin:0; font-size:14px; line-height:1.6; color:var(--directory-muted); }
.directory-close { position:absolute; top:20px; right:20px; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--directory-line); border-radius:50%; background:var(--directory-bg); color:var(--directory-muted); cursor:pointer; }
.directory-close:hover { color:var(--directory-ink); background:var(--directory-aside); }
.directory-search { display:flex; align-items:center; gap:12px; height:48px; padding:0 14px; margin-top:24px; border:1px solid var(--directory-line); border-radius:10px; background:var(--directory-card); color:var(--directory-muted); }
.directory-search:focus-within { border-color:var(--directory-accent); box-shadow:0 0 0 3px #777ee312; }
.directory-search input { width:100%; min-width:0; padding:0; border:0; outline:0; background:transparent; color:var(--directory-ink); font:400 14px var(--font-body); }
.directory-search input::placeholder { color:var(--directory-muted); }
.directory-clear { border:0; background:transparent; color:var(--directory-muted); min-width:32px; height:44px; cursor:pointer; font-size:20px; }
.directory-results-count { padding:0 34px 14px; margin:0; color:var(--directory-muted); font-size:12px; }
.directory-results { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--directory-line) transparent; padding:0 34px 28px; }
.directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; list-style:none; padding:0; margin:0; }
.directory-grid li { display:flex; align-items:center; gap:11px; min-height:82px; padding:14px 12px; border:1px solid var(--directory-line); border-radius:12px; background:var(--directory-card); }
.directory-grid img.platform-catalog-icon { width:36px; height:36px; flex-shrink:0; border-radius:8px; }
.directory-grid span { font-size:13px; font-weight:500; line-height:1.35; overflow-wrap:anywhere; }
.directory-empty { padding:55px 15px; text-align:center; color:var(--directory-muted); font-size:14px; line-height:1.7; }
.directory-empty strong { display:block; color:var(--directory-ink); font-size:20px; font-weight:400; margin-bottom:10px; }
@keyframes directory-enter { from { opacity:0; transform:translateY(10px) scale(.99); } to { opacity:1; transform:none; } }
@media(max-width:950px) { .directory-layout { grid-template-columns:250px minmax(0,1fr); } .directory-aside { padding-inline:24px; } .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) {
  .integrations-dialog { width:calc(100% - 24px); height:calc(100dvh - 24px); border-radius:18px; }
  .directory-layout { display:flex; flex-direction:column; }
  .directory-aside { flex-shrink:0; padding:22px 22px 20px; border-right:0; border-bottom:1px solid var(--directory-line); }
  .directory-eyebrow { font-size:10px; margin-right:45px; }
  .directory-total { display:none; } .directory-aside h2 { font-size:26px; margin-top:16px; padding-right:25px; }
  .directory-intro,
.directory-help { display:none; }
  .directory-main { flex:1; }
  .directory-header { padding:20px 18px 14px; }
  .directory-header h3 { font-size:19px; margin:0; } .directory-header > p { display:none; }
  .directory-search { margin-top:14px; } .directory-search input { font-size:16px; }
  .directory-close { top:12px; right:12px; }
  .directory-results-count { padding:0 18px 12px; }
  .directory-results { padding:0 18px 18px; }
  .directory-grid { gap:8px; } .directory-grid li { gap:8px; padding:12px 9px; min-height:70px; }
  .directory-grid img.platform-catalog-icon { width:30px; height:30px; border-radius:7px; }
  .directory-grid span { font-size:12px; }
}

/* Shared request state keeps the next action visible, including on mobile. */
.directory-empty p { max-width:420px; margin:0 auto 22px; }
.directory-request { display:inline-flex; justify-content:center; align-items:center; gap:20px; min-height:44px; padding:11px 18px; border:1px solid #555ae8; border-radius:8px; color:#fff; background:#555ae8; font:500 13px/1.5 var(--font-body); text-decoration:none; cursor:pointer; transition:background .2s,transform .2s; }
.directory-request:hover { background:#464bd0; transform:translateY(-1px); }
.directory-reset { display:block; margin:14px auto 0; padding:8px; border:0; background:none; color:var(--directory-muted); font:400 13px var(--font-body); text-decoration:underline; cursor:pointer; }
.cities-dialog .directory-total { font-size:82px; margin-top:44px; letter-spacing:-.065em; }
.cities-controls { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:12px; margin-top:24px; }
.cities-controls .directory-search { min-width:0; margin:0; }
.cities-filter { position:relative; display:flex; min-width:0; color:var(--directory-muted); }
.cities-filter svg { position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; }
.cities-filter select { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; appearance:none; width:100%; min-width:0; height:48px; padding:0 40px 0 14px; border:1px solid var(--directory-line); border-radius:10px; background:var(--directory-card); color:var(--directory-ink); font:400 13px var(--font-body); }
@media(max-width:650px) { .cities-controls { grid-template-columns:minmax(0,1fr) 145px; gap:8px; margin-top:14px; } .cities-controls .directory-search { padding-inline:10px; gap:6px; } .cities-filter select { font-size:12px; padding-left:10px; } }
@media(max-width:380px) { .cities-controls { grid-template-columns:minmax(0,1fr) 125px; } }
.cities-filter select:focus-visible { outline:2px solid var(--directory-accent); outline-offset:2px; }
.cities-state { margin-bottom:26px; }
.cities-state h4 { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; padding:8px 0; color:var(--directory-ink); font-size:17px; font-weight:500; }
.cities-state h4 > span:last-child { padding:4px 8px; border:1px solid var(--directory-line); border-radius:6px; color:var(--directory-muted); font-size:11px; font-weight:400; white-space:nowrap; }
.cities-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0; margin:0; list-style:none; }
.cities-list li { display:flex; align-items:center; gap:9px; min-height:55px; padding:12px; border:1px solid var(--directory-line); border-radius:9px; background:var(--directory-card); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.cities-list li::before { content:''; width:5px; height:5px; flex:0 0 5px; border-radius:50%; background:#63b79c; }
.cities-loading { display:flex; justify-content:center; align-items:center; gap:10px; padding:60px 10px; color:var(--directory-muted); font-size:14px; }
.cities-loading span { width:18px; height:18px; border:2px solid var(--directory-line); border-top-color:#657187; border-radius:50%; animation:cities-spin .8s linear infinite; }
.cities-error { padding:35px 15px; text-align:center; color:var(--directory-muted); font-size:14px; line-height:1.7; }
.cities-error strong { color:var(--directory-ink); font-weight:500; }
.cities-error > a { display:block; margin-top:18px; color:var(--directory-accent); }
.integrations-dialog [hidden] { display:none!important; }
@keyframes cities-spin { to { transform:rotate(360deg); } }
@media(max-width:950px) { .cities-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .directory-empty { padding:28px 4px; } .cities-dialog .directory-aside h2 { font-size:23px; } .cities-list li { padding:10px; } }
.directory-search input::-webkit-search-cancel-button { -webkit-appearance:none; }

/* Clip scroll shadows to the list viewport, independently of modal motion. */
.integrations-dialog .directory-aside { z-index:3; }
.integrations-dialog .directory-close { z-index:4; }
.directory-results-viewport { position:relative; isolation:isolate; overflow:hidden; flex:1; min-height:0; display:flex; flex-direction:column; }
.directory-results-viewport > .directory-results { width:100%; }
.directory-scroll-shadow { position:absolute; left:0; right:0; height:50px; z-index:2; pointer-events:none; overflow:hidden; opacity:0; transition:opacity 240ms ease; }
.directory-scroll-shadow::before { content:''; position:absolute; left:-40px; right:-40px; height:40px; background:#fff; }
.directory-scroll-shadow--top { top:0; }
.directory-scroll-shadow--top::before { bottom:100%; box-shadow:10px 20px 30px #e0e2e678; }
.directory-scroll-shadow--bottom { bottom:0; height:44px; background:linear-gradient(to top,#e0e2e678 0%,#e0e2e630 40%,transparent 100%); box-shadow:inset 0 -14px 20px -16px #65718780; }
.directory-scroll-shadow--bottom::before { content:none; }
.directory-scroll-shadow.is-visible { opacity:1; }

@media(max-width:650px) {
  :root:root .integrations-dialog .directory-aside h2 { padding-right:0; font-size:clamp(14px,calc(5.9vw - 4.25px),26px); white-space:nowrap; text-wrap:nowrap; }
}