/* Integrations page (src/components/IntegrationsBody.astro).
   Every rule is scoped under .intg and every class is prefixed ig-, so
   nothing meets the shared header and footer (public/styles.css), which
   already define .wrap, .chip, .kicker... */

.intg{
  --blue:#3148D0; --blue-dark:#232F9E; --blue-soft:#EDEFFC;
  --bg:#F7F6FB; --ink:#181A2A; --ink-soft:#5A5D74; --line:#E3E3F0;
  --panel:#EDEFFC; --tile:#FFFFFF; --soon-bg:#F4F4FA; --soon-line:#C9CCDD; --ph-line:#B9BCD0;
  --bar:#0B0E2A; --bar-ink:#FFFFFF; --bar-soft:#B7BFFA;
  --f-display:"Sora", system-ui, sans-serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--bg);color:var(--ink);font-family:var(--f-body);line-height:1.5;
}
.intg *,.intg *::before,.intg *::after{box-sizing:border-box}
.intg :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.intg .ig-sr,.intg .ig-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.intg .ig-wrap{max-width:1140px;margin:0 auto;padding:48px 28px 120px}
.intg .ig-head{max-width:640px;margin:0 auto 36px;text-align:center}
.intg .ig-kicker{font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.intg h1{font:800 30px/1.25 var(--f-display);margin:0 0 12px;color:var(--ink)}
.intg .ig-head p{color:var(--ink-soft);font-size:15.5px;margin:0}

.intg .ig-panel{background:var(--panel);border-radius:28px;padding:24px 28px 26px}
.intg .ig-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}

/* Search */
.intg .ig-search{position:relative;flex:0 0 33.333%;min-width:240px}
.intg .ig-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-soft);pointer-events:none}
.intg .ig-search input{width:100%;min-height:44px;padding:10px 36px;border:1.5px solid var(--line);border-radius:12px;font:400 13.5px var(--f-body);background:var(--tile);color:var(--ink)}
.intg .ig-search input::placeholder{color:var(--ink-soft)}
.intg .ig-search input::-webkit-search-cancel-button{display:none}
.intg .ig-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--ink-soft);cursor:pointer;display:none;align-items:center;justify-content:center}
.intg .ig-clear svg{position:static;transform:none}
.intg .ig-clear.show{display:flex}

/* Category tabs */
.intg .ig-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
@media (min-width:960px){.intg .ig-tabs.spread{justify-content:space-between}}
.intg .ig-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:34px;border:1px solid var(--line);background:var(--tile);color:var(--ink);border-radius:100px;padding:6px 11px;font:700 12px/1 var(--f-body);cursor:pointer}
.intg .ig-tab:hover{border-color:var(--blue)}
.intg .ig-tab[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.intg .ig-tab .ig-n{font-size:11px;opacity:.75}

.intg .ig-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;margin:4px 0 14px;font-size:12.5px;line-height:20px;color:var(--ink-soft)}
.intg .ig-legend>div{padding-left:4px}
.intg .ig-link{border:0;background:none;padding:0;margin-right:4px;line-height:20px;font:700 12.5px var(--f-body);color:var(--blue);text-decoration:underline;cursor:pointer}

/* Tiles */
.intg .ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.intg .ig-chip{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:10px 8px;border-radius:12px;text-align:center;font:inherit;color:inherit;min-width:0}
.intg .ig-cl{width:46px;height:46px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.intg .ig-cl img{width:46px;height:46px;object-fit:contain;display:block}
.intg .ig-tx{display:flex;flex-direction:column;align-items:center;min-width:0}
.intg .ig-nm{min-height:30px;display:flex;align-items:center;justify-content:center;font:700 11.5px/1.3 var(--f-display)}
.intg .ig-nm mark{background:rgba(49,72,208,.18);color:inherit;border-radius:3px;padding:0 1px}

.intg .ig-live{background:var(--tile);border:1px solid var(--line)}

.intg .ig-soon{background:var(--soon-bg);border:1.5px dashed var(--soon-line);cursor:pointer;transition:border-color .12s,background .12s}
.intg .ig-soon .ig-cl img{filter:grayscale(1);opacity:.55;transition:filter .15s,opacity .15s}
.intg .ig-soon .ig-nm{color:var(--ink-soft)}
.intg .ig-soon:hover{border-color:var(--blue)}
.intg .ig-soon:hover .ig-cl img{filter:none;opacity:1}
.intg .ig-st{position:absolute;top:7px;left:7px;font-size:8.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft);background:var(--tile);border:1px solid var(--line);border-radius:100px;padding:1px 6px}
.intg .ig-ck{position:absolute;top:7px;right:7px;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--soon-line);background:var(--tile);display:flex;align-items:center;justify-content:center;color:transparent;transition:background .12s,border-color .12s}
.intg .ig-soon[aria-pressed="true"]{background:var(--blue-soft);border:1.5px solid var(--blue)}
.intg .ig-soon[aria-pressed="true"] .ig-cl img{filter:none;opacity:1}
.intg .ig-soon[aria-pressed="true"] .ig-nm{color:var(--ink)}
.intg .ig-soon[aria-pressed="true"] .ig-ck{background:var(--blue);border-color:var(--blue);color:#FFFFFF}

/* "Another tool?" tile, which turns into a small form */
.intg .ig-req{background:transparent;border:1.5px dashed var(--soon-line);color:var(--blue)}
.intg .ig-req:hover{border-color:var(--blue);background:var(--tile)}
.intg .ig-reqb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:10px 8px;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;cursor:pointer}
.intg .ig-rm{margin:0;font-size:11.5px;line-height:1.3;color:var(--ink-soft)}
.intg .ig-rm:empty{display:none}
.intg .ig-pl{width:40px;height:40px;border-radius:50%;background:var(--tile);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.intg .ig-req .ig-nm{color:var(--blue)}
.intg .ig-req form{display:none;flex-direction:column;align-items:stretch;justify-content:center;width:100%;gap:6px}
.intg .ig-req.editing{background:var(--tile)}
.intg .ig-req.editing .ig-reqb{display:none}
.intg .ig-req.editing form{display:flex}
.intg .ig-req input{width:100%;height:44px;padding:10px;border:1.5px solid var(--line);border-radius:10px;font:400 13px var(--f-body);background:var(--tile);color:var(--ink)}
.intg .ig-add{width:100%;height:44px;border:0;border-radius:10px;background:var(--blue);color:#FFFFFF;font:700 13px var(--f-body);cursor:pointer}

.intg .ig-more{display:flex;justify-content:center;margin-top:12px}
.intg .ig-btn-o{min-height:42px;border:1.5px solid var(--blue);background:var(--tile);color:var(--blue);border-radius:12px;padding:8px 18px;font:700 13px var(--f-body);cursor:pointer}

/* Notification bar, slides up once a "coming soon" tool is ticked */
.intg .ig-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140%);width:min(860px,calc(100% - 24px));background:var(--bar);color:var(--bar-ink);border-radius:18px;padding:12px 12px 12px 18px;box-shadow:0 24px 50px -16px rgba(10,12,40,.55);display:flex;align-items:center;gap:12px;flex-wrap:wrap;transition:transform .25s ease;z-index:20}
.intg .ig-bar.show{transform:translate(-50%,0)}
.intg .ig-bar :focus-visible{outline-color:#FFFFFF}
.intg .ig-sel{flex:1 1 220px;min-width:0}
.intg .ig-sel strong{font:800 14px var(--f-display);display:block}
.intg .ig-sel span{font-size:12px;color:var(--bar-soft);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intg .ig-form{display:contents}
.intg .ig-em{flex:1 1 220px;position:relative}
.intg .ig-em input{width:100%;min-height:44px;padding:10px 12px;border:1.5px solid transparent;border-radius:11px;font:400 13.5px var(--f-body);background:#FFFFFF;color:#181A2A}
.intg .ig-em input[aria-invalid="true"]{border-color:#FF6B9A}
.intg .ig-go{min-height:44px;border:0;border-radius:11px;background:var(--blue);color:#FFFFFF;font:700 14px var(--f-body);padding:0 18px;cursor:pointer;white-space:nowrap}
.intg .ig-go:hover{filter:brightness(1.12)}
.intg .ig-x{min-height:44px;border:0;background:transparent;color:var(--bar-soft);font:700 12.5px var(--f-body);text-decoration:underline;cursor:pointer;padding:0 6px}
.intg .ig-err{flex:1 1 100%;font-size:12px;color:#FFB3C9;margin:-2px 0 0;display:none}
.intg .ig-err.show{display:block}
.intg .ig-bar.done .ig-sel,.intg .ig-bar.done .ig-em,.intg .ig-bar.done .ig-go,.intg .ig-bar.done .ig-x,.intg .ig-bar.done .ig-err{display:none}
.intg .ig-ok{display:none;flex:1 1 auto;align-items:center;gap:12px}
.intg .ig-bar.done .ig-ok{display:flex}
.intg .ig-ic{width:34px;height:34px;border-radius:50%;background:#1FA35A;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.intg .ig-ok p{margin:0;font-size:13px;color:var(--bar-soft)}
.intg .ig-ok strong{display:block;color:#FFFFFF;font:800 14px var(--f-display)}
.intg .ig-ok button{margin-left:auto;min-height:40px;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#FFFFFF;border-radius:10px;padding:0 14px;font:700 12.5px var(--f-body);cursor:pointer}

@media (max-width:640px){
  .intg .ig-wrap{padding:28px 14px 200px}
  .intg .ig-panel{padding:22px 14px 26px;border-radius:20px}
  .intg h1{font-size:25px}
  .intg .ig-search{flex:1 1 100%}
  .intg .ig-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
  .intg .ig-cl,.intg .ig-cl img{width:40px;height:40px}
  .intg .ig-req input,.intg .ig-add{height:38px}
  .intg .ig-go{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.intg *{transition:none!important}}