/* /integrations/<slug> setup pages (src/app/integrations/[slug]/route.ts). Loads after p-discovery.css. */

/* Works with card */
.ig-works{padding:44px 48px 32px;border-radius:24px;background:#f0f0ed;box-shadow:0 1px 0 rgba(0,0,0,.03),0 18px 44px rgba(26,24,20,.08)}
.ig-marks{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.ig-tile{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#fff;box-shadow:0 6px 18px rgba(26,24,20,.07);flex-shrink:0}
.ig-tile img{display:block;object-fit:contain}
.ig-mono{font-family:var(--head);font-size:38px;line-height:1;color:#222;letter-spacing:-.04em}
.ig-link{display:flex;gap:5px}
.ig-link i{width:5px;height:5px;border-radius:50%;background:#c9c8c2}
.ig-works .section-kicker{margin-bottom:12px}
.story .ig .ig-works h2{font-size:40px;line-height:1.12}
.ig-pill{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 14px;border-radius:999px;font-size:13px;line-height:18px;font-weight:500}
.ig-pill span{width:7px;height:7px;border-radius:50%;background:currentColor}
.ig-pill.is-ok{background:#eef6ea;color:#4f8b43}
.ig-pill.is-partial{background:#fff3de;color:#c47a12}
.story .ig-answer{font-size:17px;line-height:28px;color:#555;margin-top:24px}
.story .ig-label-note{font-size:14px;line-height:23px;color:#888;margin-top:14px}
.ig-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:28px 0 0;padding:8px;border-radius:18px;background:#e8e7e2}
.ig-facts>div{padding:16px 18px;border-radius:12px;background:#fff}
.ig-facts>div:last-child:nth-child(odd){grid-column:1/-1}
.ig-facts dt{font-size:12px;line-height:16px;color:#999}
.ig-facts dd{margin:6px 0 0}
.ig-facts strong{display:block;font-size:15px;line-height:22px;font-weight:500;color:#222}
.ig-facts dd span{display:block;font-size:13px;line-height:20px;color:#888;margin-top:2px}

/* Numbered setup card */
.ig-steps{list-style:none;margin:0;padding:8px;border-radius:24px;background:#f0f0ed;display:grid;gap:8px}
.ig-steps>li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:24px 24px 24px 20px;border-radius:18px;background:#fff}
.ig-steps .dc-n{padding-top:4px;color:#a8a8a3}
.ig-steps h3{font-size:18px;line-height:26px;font-weight:500;letter-spacing:-.02em;color:#222}
.story .ig-steps p{font-size:16px;line-height:26px;color:#666;margin-top:6px}
.story .ig-more{margin-top:20px}

/* Terminal code block */
.ig-term{margin-top:16px;border-radius:14px;background:#17191d;color:#e8e8e8;overflow:hidden}
.ig-term-top{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-bottom:1px solid #26292e;font-size:11px;line-height:16px;color:#8b9097}
.ig-term-top .terminal-dots{margin:0}
.ig-term-top .terminal-dots i{width:8px;height:8px}
.ig-term-top>span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-copy{flex-shrink:0;font:500 11px/16px var(--body);color:#c9ccd1;background:#26292e;border-radius:999px;padding:4px 10px;transition:background .2s var(--ease),color .2s var(--ease)}
.ig-copy:hover{background:#33373d;color:#fff}
.ig-term pre{margin:0;padding:14px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ig-term code{display:grid;gap:4px;font:13px/22px ui-monospace,SFMono-Regular,Menlo,monospace;color:#e8e8e8;background:none;padding:0;white-space:pre}
.ig-term .terminal-prompt{color:#7fa872;margin-right:10px;user-select:none}

/* What you will hear */
.ig-hear{max-width:1080px;margin:0 auto}
.ig-demo{margin:8px 0 0}
.ig-demo .demo-video{border-radius:24px;box-shadow:0 1px 0 rgba(0,0,0,.03),0 18px 44px rgba(26,24,20,.08)}
.ig-demo .wrapper-scene{border-radius:24px}
.story .ig-demo figcaption{font-size:13px;line-height:21px;color:#999;margin:16px auto 0;max-width:760px;text-align:center}
.ig-works-list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--dc-line)}
.ig-works-list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:20px 4px;border-bottom:1px solid var(--dc-line)}
.ig-works-list .dc-n{padding-top:3px}
.story .ig-works-list p{font-size:17px;line-height:27px;color:#444}
.story .ig-modes{font-size:15px;line-height:25px;color:#888;margin-top:20px}

/* Limits */
.ig-limits{list-style:none;margin:0;padding:8px;border-radius:24px;background:#f0f0ed;display:grid;gap:8px}
.ig-limits li{position:relative;padding:18px 20px 18px 46px;border-radius:14px;background:#fff;font-size:16px;line-height:25px;color:#555}
.ig-limits li:before{content:"";position:absolute;left:20px;top:27px;width:8px;height:8px;border-radius:50%;background:#fff3de;box-shadow:inset 0 0 0 2px #c47a12}

@media(max-width:720px){
  .ig-works{padding:28px 22px 22px}
  .ig-tile{width:52px;height:52px;border-radius:14px}
  .ig-tile img[width="40"]{width:32px;height:32px}
  .ig-tile img[width="30"]{width:24px;height:24px}
  .ig-mono{font-size:30px}
  .ig-marks{margin-bottom:22px}
  .story .ig .ig-works h2{font-size:30px}
  .story .ig-answer{font-size:16px;line-height:26px}
  .ig-facts{gap:6px;padding:6px;border-radius:16px}
  .ig-facts>div{padding:14px}
  .ig-facts strong{font-size:14px;line-height:20px}
  .ig-facts dd span{font-size:12px;line-height:18px}
  .ig-steps>li{grid-template-columns:1fr;gap:6px;padding:20px 18px}
  .ig-steps .dc-n{padding-top:0}
  .story .ig-steps p{font-size:15px;line-height:24px}
  .ig-term code{font-size:12px;line-height:20px}
  .ig-demo .demo-video{border-radius:16px}
  .ig-works-list li{grid-template-columns:40px minmax(0,1fr)}
  .story .ig-works-list p{font-size:16px;line-height:25px}
  .ig-limits li{font-size:15px;line-height:24px;padding:16px 16px 16px 40px}
  .ig-limits li:before{left:16px;top:24px}
}
@media(prefers-reduced-motion:reduce){.ig-copy{transition:none}}