/* ZKas Idea & Capability Map — shared renderer styles.
   Namespaced under #zkas-ideamap and #zkas-ideamap-modal so it is safe to drop
   onto any page. Colours reference the host page's theme vars (--bg/--acc/…),
   which both plan-draft-public and docs define, so it adapts to light & dark. */
#zkas-ideamap{--im-live:var(--acc);--im-sdk:var(--acc2);--im-build:var(--warn);--im-horizon:var(--pur);--im-bad:var(--bad)}
#zkas-ideamap *{box-sizing:border-box}

/* stats */
#zkas-ideamap .im-stats{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}
#zkas-ideamap .im-stat{background:var(--panel2,var(--panel));border:1px solid var(--line);border-radius:11px;padding:10px 16px;font-size:13px;color:var(--mut)}
#zkas-ideamap .im-stat b{display:block;font-size:23px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}

/* controls */
#zkas-ideamap .im-controls{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin:0 0 16px}
#zkas-ideamap .im-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
#zkas-ideamap .im-row+.im-row{margin-top:9px}
#zkas-ideamap .im-lbl{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;margin-right:3px;min-width:58px}
#zkas-ideamap select,#zkas-ideamap input[type=search]{background:var(--panel2,var(--panel));color:var(--ink);border:1px solid var(--line2,var(--line));border-radius:8px;padding:8px 11px;font:inherit;font-size:13px}
#zkas-ideamap input[type=search]{flex:1;min-width:170px;max-width:360px}
#zkas-ideamap .im-chip{cursor:pointer;user-select:none;font-size:13.5px;border:1px solid var(--line2,var(--line));color:var(--mut);
  background:var(--panel2,var(--panel));border-radius:999px;padding:8px 15px;transition:.12s;line-height:1.2}
#zkas-ideamap .im-chip:hover{color:var(--ink);border-color:var(--acc)}
#zkas-ideamap .im-chip.on{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc);border-color:var(--acc)}
#zkas-ideamap .im-chip.r-SDK.on{background:color-mix(in srgb,var(--acc2) 16%,transparent);color:var(--acc2);border-color:var(--acc2)}
#zkas-ideamap .im-chip.r-Buildable.on{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);border-color:var(--warn)}
#zkas-ideamap .im-chip.r-Horizon.on,#zkas-ideamap .im-chip.f-yes.on{background:color-mix(in srgb,var(--pur) 18%,transparent);color:var(--pur);border-color:var(--pur)}
#zkas-ideamap .im-count{color:var(--dim);font-size:13.5px;margin:0 0 14px}

/* grid + card */
#zkas-ideamap .im-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;align-items:start}
#zkas-ideamap .im-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:20px 22px;
  display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:border-color .13s;text-align:left;width:100%;font:inherit;color:inherit}
#zkas-ideamap .im-card:hover{border-color:var(--acc)}
#zkas-ideamap .im-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#zkas-ideamap .im-ctop{display:flex;justify-content:space-between;align-items:flex-start;gap:9px}
#zkas-ideamap .im-name{font-weight:660;font-size:18px;color:var(--ink);line-height:1.32;letter-spacing:-.01em}
#zkas-ideamap .im-cat{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#zkas-ideamap .im-badge{font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap;flex-shrink:0;border:1px solid}
#zkas-ideamap .im-fork{font-size:10.5px;font-weight:700;border-radius:999px;padding:3px 9px;text-transform:none;border:1px solid}
#zkas-ideamap .b-Live,#zkas-ideamap .f-No{background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
#zkas-ideamap .b-SDK{background:color-mix(in srgb,var(--acc2) 15%,transparent);color:var(--acc2);border-color:color-mix(in srgb,var(--acc2) 45%,transparent)}
#zkas-ideamap .b-Buildable{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
#zkas-ideamap .b-Horizon,#zkas-ideamap .f-Fork{background:color-mix(in srgb,var(--pur) 16%,transparent);color:var(--pur);border-color:color-mix(in srgb,var(--pur) 45%,transparent)}
#zkas-ideamap .im-blurb{font-size:15px;color:var(--ink2,var(--mut));line-height:1.62}
#zkas-ideamap .im-ratings{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:13px}
#zkas-ideamap .im-rr{display:flex;align-items:center;gap:9px;font-size:13px}
#zkas-ideamap .im-rr .im-rlbl{color:var(--mut);min-width:128px}
#zkas-ideamap .im-dots{display:flex;gap:3px}
#zkas-ideamap .im-dot{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--line3,var(--line2)) 70%,transparent)}
#zkas-ideamap .im-dot.c{background:var(--warn)}#zkas-ideamap .im-dot.p{background:var(--acc)}#zkas-ideamap .im-dot.g{background:var(--acc2)}
#zkas-ideamap .im-rv{color:var(--dim);font-size:12px;margin-left:auto;font-variant-numeric:tabular-nums}
#zkas-ideamap .im-open{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:12px;font-size:12.5px}
#zkas-ideamap .im-open .im-enab{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#zkas-ideamap .im-open .im-go{color:var(--acc2);font-weight:600;white-space:nowrap}
#zkas-ideamap .im-empty{color:var(--dim);padding:40px 0;text-align:center}

/* ───── modal ───── */
#zkas-ideamap-modal{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:28px 18px}
#zkas-ideamap-modal.on{display:flex}
#zkas-ideamap-modal .im-scrim{position:absolute;inset:0;background:rgba(3,6,10,.66);backdrop-filter:blur(4px);animation:im-fade .18s ease}
#zkas-ideamap-modal .im-dialog{position:relative;z-index:1;width:100%;max-width:720px;max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line2,var(--line));border-radius:16px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.5);animation:im-pop .2s cubic-bezier(.2,.8,.3,1)}
#zkas-ideamap-modal .im-head{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 15px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 88%,var(--bg));position:sticky;top:0}
#zkas-ideamap-modal .im-htext{flex:1;min-width:0}
#zkas-ideamap-modal .im-mname{font-size:22px;font-weight:680;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
#zkas-ideamap-modal .im-mmeta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:9px}
#zkas-ideamap-modal .im-x{flex-shrink:0;background:var(--panel2,var(--bg));border:1px solid var(--line2,var(--line));color:var(--mut);
  width:34px;height:34px;border-radius:9px;font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.14s}
#zkas-ideamap-modal .im-x:hover{color:var(--acc);border-color:var(--acc)}
#zkas-ideamap-modal .im-body{overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 24px;-webkit-overflow-scrolling:touch}
#zkas-ideamap-modal .im-stpill{display:inline-block;font-size:12.5px;font-weight:700;border-radius:8px;padding:6px 12px;border:1px solid;margin-bottom:4px}
#zkas-ideamap-modal .im-mrate{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0 18px;padding:12px 14px;background:var(--panel2,var(--bg));border:1px solid var(--line);border-radius:11px}
#zkas-ideamap-modal .im-mrate .im-rr{min-width:150px}
#zkas-ideamap-modal .im-sec{margin:0 0 17px}
#zkas-ideamap-modal .im-sec:last-child{margin-bottom:0}
#zkas-ideamap-modal .im-sec h4{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);font-weight:700}
#zkas-ideamap-modal .im-sec p{margin:0;font-size:15.2px;line-height:1.64;color:var(--ink2,var(--ink))}
#zkas-ideamap-modal .im-sec code{background:var(--code,var(--bg));border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:13px;color:var(--acc);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:break-word}
#zkas-ideamap-modal .im-sec ol{margin:6px 0 0;padding-left:20px}#zkas-ideamap-modal .im-sec li{margin:3px 0;font-size:14.6px;line-height:1.58}
#zkas-ideamap-modal .im-dep{border-left:3px solid var(--bad);background:color-mix(in srgb,var(--bad) 7%,transparent);border-radius:0 9px 9px 0;padding:11px 14px}
#zkas-ideamap-modal .im-dep.ok{border-left-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent)}
#zkas-ideamap-modal .im-dep h4{color:var(--dim)}
@keyframes im-pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes im-fade{from{opacity:0}to{opacity:1}}
@keyframes im-sheet{from{transform:translateY(100%)}to{transform:none}}

/* ───── mobile: full-screen sheet ───── */
@media(max-width:640px){
  #zkas-ideamap .im-grid{grid-template-columns:1fr}
  #zkas-ideamap .im-controls{border-radius:0;margin-left:-16px;margin-right:-16px;border-left:0;border-right:0;padding-left:16px;padding-right:16px}
  #zkas-ideamap .im-lbl{min-width:100%;margin-bottom:-2px}
  #zkas-ideamap-modal{padding:0;align-items:stretch}
  #zkas-ideamap-modal .im-dialog{max-width:none;max-height:100%;height:100%;border-radius:0;border:0;animation:im-sheet .24s cubic-bezier(.2,.8,.3,1)}
  #zkas-ideamap-modal .im-head{padding:16px 16px 13px}
  #zkas-ideamap-modal .im-mname{font-size:18px}
  #zkas-ideamap-modal .im-body{padding:16px 16px calc(28px + env(safe-area-inset-bottom))}
  #zkas-ideamap-modal .im-x{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
  #zkas-ideamap-modal .im-dialog,#zkas-ideamap-modal .im-scrim{animation:none}
}