/* Scene styles for the integration pages (tools/site/scenes/integrations.py). Builds on mock.css; tokens only. */

/* shared bits */
.mk .mki-logo{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;background:#fff;box-shadow:0 0 0 1px rgba(15,15,18,.08)}
.mk .mki-logo img{display:block;width:62%;height:62%;object-fit:contain}
.mk img.mki-i{display:block;width:14px;height:14px;object-fit:contain;flex:none}
.mki-ft{display:inline-grid;place-items:center;width:16px;height:16px;flex:none;color:var(--c)}
.mki-ft svg{width:14px;height:14px}
.mki-swap{display:grid}
.mki-swap>*{grid-area:1/1}
.mki-k{font:500 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mki-center{display:grid;place-items:center;padding:22px 14px;min-height:250px}
.mki-sw{display:inline-block;width:11px;height:11px;border-radius:3px;background:#dff14a;box-shadow:0 0 0 1px rgba(15,15,18,.2);vertical-align:-1px;margin-right:4px}
.mk .mk-comp [data-type]{color:var(--ink)}

/* two windows, one behind the other */
.mki-layer{display:grid}
.mki-layer>*{grid-area:1/1}
.mki-behind{margin:0 30% 26% 0;align-self:start}
.mki-front{margin:34% 0 0 18%;align-self:end;z-index:1}
.mki-back{padding:12px;display:flex;flex-direction:column;gap:8px}
.mki-row{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;align-items:start;font-size:12px}
.mki-row>div{display:flex;flex-direction:column;gap:5px}
.mki-row .mk-sk{display:block}
@container (max-width:460px){.mki-behind{margin:0 12% 50% 0}.mki-front{margin:46% 0 0 6%}}

/* Kipwise results inside a Slack reply */
.mki-hls{display:flex;flex-direction:column;gap:7px;align-self:stretch}
.mki-hl{display:flex;align-items:center;gap:7px;font-weight:600}

/* identity providers */
.mki-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
.mki-dir{padding:12px;display:flex;flex-direction:column;gap:6px}
.mki-dir header{display:flex;align-items:center;gap:8px;font-size:13px}
.mki-dir small{font:500 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.mki-dir .mk-li{white-space:nowrap}
.mki-dir .mk-li b{overflow:hidden;text-overflow:ellipsis}
.mki-off{color:var(--ink-3)}
.mki-off .mk-av{filter:grayscale(1);opacity:.6}
.mki-sync{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-3)}
.mki-sync span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lime);color:#0f0f12;font-size:17px;font-weight:700}
.mki-sync small{font:500 9.5px/1 var(--mono);letter-spacing:.08em}
@container (max-width:460px){.mki-pair{grid-template-columns:minmax(0,1fr)}.mki-sync{flex-direction:row;justify-content:center}.mki-sync span{transform:rotate(90deg)}}

.mki-auth{width:min(290px,100%);border-radius:14px;background:var(--win);box-shadow:0 0 0 1px var(--line);padding:20px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.mki-auth__h{font:700 16px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.mki-sso{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:40px;border-radius:9px;box-shadow:inset 0 0 0 1.5px var(--line-2);font-weight:700;font-size:12.5px;transition:box-shadow .2s,background .2s}
.mki-sso .mki-logo{width:24px;height:24px;border-radius:6px}
.mki-sso.is-press{background:var(--card-2);box-shadow:inset 0 0 0 2px var(--mk-ok)}
.mki-me{align-self:flex-end}
.mki-home .mk-aside{gap:9px}
.mki-home .mk-aside>.mk-sk{margin-left:7px}
.mki-toast{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 5px;border-radius:9px;background:var(--mk-ok-bg);color:var(--mk-ok);font-size:12px;font-weight:700}
.mki-toast .mki-logo{width:24px;height:24px;border-radius:6px}
.mki-duo{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-weight:600}
.mki-duo .mki-logo{width:34px;height:34px}
.mki-url{display:flex;align-items:center;gap:6px;width:100%;font-size:12px;color:var(--ink-2)}
.mki-url .mk-input{flex:1;color:var(--ink-3)}
.mki-wide{width:100%;justify-content:center;height:34px}

/* embeds */
.mki-cells .mk-sk{display:block;margin:2px 0}
.mki-player{position:relative;aspect-ratio:16/7;border-radius:6px;display:grid;place-items:center;background:var(--pl)}
.mki-player--youtube{--pl:var(--card-3);--fg:#ff0000}
.mki-player--wistia{--pl:#2a8ae0}
.mki-player--vimeo{--pl:#1ab7ea}
.mki-player--loom{--pl:#625df5}
.mki-play{width:46px;height:46px;border-radius:50%;border:3px solid var(--fg,#fff);display:grid;place-items:center}
.mki-play::after{content:"";margin-left:4px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--fg,#fff)}
.mki-player .mki-logo{position:absolute;right:8px;bottom:8px;width:26px;height:26px}
.mk-live .mki-player .mki-play{animation:mki-pulse 2s ease-in-out infinite}
.mki-flow{display:flex;align-items:center;gap:4px}
.mki-flow>span{flex:1;min-width:0;height:26px;border-radius:5px;background:#fde3c6;box-shadow:inset 0 0 0 1px #f0a35a;display:grid;place-items:center;padding:0 6px}
.mki-flow>span .mk-sk{display:block;background:rgba(15,15,18,.18)}
.mki-flow>b{color:var(--ink-3);font-size:11px}
.mki-cap{font-size:11px;text-align:center;color:var(--ink-2)}
.mki-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-items:start}
.mki-col{display:flex;flex-direction:column;gap:4px}
.mki-col i{height:16px;border-radius:3px;background:var(--card-3)}
.mki-col--r i{background:#f4a7a9}.mki-col--b i{background:#a9c7f7}
.mki-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:6px;border-radius:6px;background:var(--card-2)}
.mki-frame{border-radius:5px;padding:7px;display:flex;flex-direction:column;gap:4px;min-height:74px;color:#0f0f12}
.mki-frame b{font-size:10.5px}
.mki-frame i{height:12px;width:70%;border-radius:2px;background:#ffe57f}
.mki-frame--b{background:#b8d0f5}.mki-frame--o{background:#ffc38a}.mki-frame--t{background:#a8e0d8}
.mki-frames{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:6px;height:84px}
.mki-frames i{border-radius:4px;background:var(--card-3)}
.mki-post{display:flex;align-items:center;gap:8px}
.mki-post>div{flex:1;display:flex;flex-direction:column;gap:5px}
.mki-dot{width:26px;height:26px;border-radius:50%;background:var(--card-3);flex:none}
.mki-media{height:62px;border-radius:5px;background:var(--card-3)}
.mk-embed .mk-sk{display:block}
.mki-trello{padding:10px;border-radius:6px;background:#0079bf}
.mki-tcard{border-radius:5px;background:#fff;padding:8px;display:flex;flex-direction:column;gap:5px}
.mki-tcard .mk-sk{background:#e3e0d6}
.mki-tcard>span{display:flex;gap:4px;justify-content:flex-end}
.mki-cmt{display:flex;align-items:center;gap:7px}
.mki-cmt .mk-input{flex:1;height:28px;font-size:11.5px;color:var(--ink-3)}

/* helpdesk ticket + Kipwise panel */
.mki-desk{display:grid;grid-template-columns:48px minmax(0,1fr);min-width:0}
.mki-rail{background:var(--card-2);border-right:1px solid var(--line);padding:10px 0;display:flex;justify-content:center}
.mki-u{text-decoration:underline;text-decoration-color:var(--mk-ok);text-decoration-thickness:2px;text-underline-offset:3px}

/* browser extension */
.mki-bar{display:flex;align-items:center;gap:6px;color:var(--ink-3)}
.mki-bar .mk-input{flex:1;min-width:0;height:28px;font-size:11.5px;white-space:nowrap;overflow:hidden}
.mki-plus{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--mk-ok);color:var(--mk-ok);font:700 13px/1 var(--sans);flex:none}
.mki-grid4{display:grid;grid-template-columns:5px 5px;gap:2px;flex:none}
.mki-grid4 i{width:5px;height:5px;border-radius:1px;background:currentColor}
.mki-pop{border-radius:12px;background:var(--win);box-shadow:0 24px 50px -20px rgba(0,0,0,.45),0 0 0 1px var(--line);display:flex;flex-direction:column;overflow:hidden}
.mki-pop>header{display:flex;align-items:center;gap:6px;padding:10px 12px 8px;font-size:12.5px}
.mki-pop>header i,.mki-dlg>header i{margin-left:auto;font-style:normal;color:var(--ink-3)}
.mki-pop>.mki-bar{padding:0 12px 10px;border-bottom:1px solid var(--line)}
.mki-pop__b{padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.mki-hit{display:grid;grid-template-columns:16px minmax(0,1fr);gap:7px;padding:6px 0;border-top:1px solid var(--line)}
.mki-hit b{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:3px}
.mki-hit .mk-ctx{display:flex;align-items:center;gap:4px}
.mki-browser{position:relative;min-height:320px}
.mki-site{padding:18px;width:50%;display:flex;flex-direction:column;gap:10px;font-size:12.5px;color:var(--ink-2)}
.mki-site .mk-sk{display:block}
.mki-hd{height:14px}
.mki-sel{background:rgba(29,155,209,.28);border-radius:2px}
.mki-rclick{position:absolute;left:12%;top:40%;z-index:2}
.mki-rclick .mk-menu{min-width:190px}
.mki-rclick .mk-tile{margin-right:-2px}
.mki-corner{position:absolute;right:12px;top:12px;width:min(270px,50%);z-index:3}
.mki-solo{display:grid;place-items:center}
.mki-solo .mki-pop{width:min(300px,100%)}
.mki-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:6px 0 4px;font-size:12px;color:var(--ink-3)}
.mki-empty p{margin:0}
.mki-empty b{color:var(--ink)}
.mki-q{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--mk-ok-bg);color:var(--mk-ok)}
.mki-q .mk-ico,.mki-q svg{width:28px;height:28px}
.mki-people{display:flex;gap:6px;margin-top:4px}
.mki-people .mk-av{border-radius:50%}
.mki-tools{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:14px;align-items:center}
.mki-chips{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:14px}
.mki-chips .mki-logo{width:58px;height:58px;border-radius:50%;box-shadow:0 12px 26px -14px rgba(0,0,0,.45),0 0 0 1px rgba(15,15,18,.06)}
.mki-chips>span:nth-child(even){margin-top:26px}
@container (max-width:460px){.mki-browser{min-height:430px}.mki-site{width:100%}.mki-rclick{left:4%;top:16%}.mki-corner{top:auto;bottom:10px;width:78%}.mki-tools{grid-template-columns:minmax(0,1fr)}.mki-chips{grid-template-columns:repeat(4,auto)}.mki-chips>span:nth-child(even){margin-top:0}.mki-chips .mki-logo{width:44px;height:44px}}

/* analytics + review */
.mki-vote{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--mk-rev-bg);color:var(--mk-rev);font-size:10.5px;font-weight:700;white-space:nowrap;flex:none}
.mk-li>.mk-ico{color:var(--mk-ok)}
.mki-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:9px;background:var(--mk-rev-bg);font-size:12px;color:var(--ink)}
.mki-banner small{color:var(--ink-3)}
.mki-review{gap:8px}
.mki-review>b{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.mki-review .mk-input{height:28px;font-size:11.5px;color:var(--ink-3)}
.mki-review footer{display:flex;justify-content:flex-end}
.mki-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px 0 4px;border-radius:6px;background:var(--card-2);font-size:11.5px;font-weight:600}
.mki-chip i{font-style:normal;color:var(--ink-3)}
.mki-f2{display:flex;align-items:center;gap:10px}
.mki-f2 .mk-input{width:auto;color:var(--ink)}

/* Slack wiki: activity feed, modals, the page that comes out of it */
.mki-acth{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mki-act{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;font-size:12px}
.mki-act p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mki-tall .mk-sbody{min-height:330px}
.mki-modal{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:14px;background:rgba(15,15,18,.42)}
.mki-dlg{width:min(340px,100%);border-radius:12px;background:var(--win);box-shadow:0 30px 60px -24px rgba(0,0,0,.6),0 0 0 1px var(--line);display:flex;flex-direction:column;max-height:100%;overflow:hidden}
.mki-dlg>header{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
.mki-dlg__b{padding:12px 14px;display:flex;flex-direction:column;gap:9px;font-size:12px}
.mki-dlg footer{padding:10px 14px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.mki-f{display:flex;flex-direction:column;gap:4px}
.mki-f small{font-size:11px;font-weight:700;color:var(--ink)}
.mki-f .mk-input{height:30px}
.mki-found{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mki-rt{display:flex;align-items:center;gap:6px;font-size:12.5px}
.mki-dlg .mk-card{gap:5px}
.mki-more{position:absolute;right:16px;top:118px;z-index:4}
.mki-float{position:absolute;right:12px;bottom:12px;width:min(300px,62%);z-index:4}
.mki-float .mk-win{box-shadow:0 30px 60px -24px rgba(0,0,0,.55),0 0 0 1px var(--line)}

@keyframes mki-pulse{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){.mk-live .mki-player .mki-play{animation:none}}