/* Constellate: styles and theme tokens */
:root{
  --sky:#E8ECF2;--ink:#1B2A44;--faint:#58657C;--line:#AEBBCF;--panel:#F6F8FB;--panel-line:#C9D2DF;--control-line:#76839A;--hover:#DEE5EF;--bgstar:#8E9AB0;--halo:.13;
  --entra:#2F5BC4;--exchange:#94690A;--intune:#B0560E;--defender:#B5352A;--purview:#6A4BB5;--collab:#1B7A66;--copilot:#B02E79;--apps365:#4E7A14;--power:#0B6E99;--viva:#8E3FA8;--admin:#45657F;
  --text-xs:12px;--text-sm:13px;--text-md:14px;--text-lg:15px;
  --font-display:"EB Garamond",Georgia,"Times New Roman",serif;--font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow-pop:0 12px 30px -12px rgba(8,16,34,.45);
  --ease-out:cubic-bezier(.3,.7,.3,1);--dur-fast:.2s;--dur-base:.4s;--dur-slow:1s;
  --target:44px;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sky:#0C1526;--ink:#ECE6D5;--faint:#8593AD;--line:#2C3E5E;--panel:#101C33;--panel-line:#25395B;--control-line:#61749A;--hover:#1A2B4A;--bgstar:#C9D3E8;--halo:.22;
  --entra:#8FB3FF;--exchange:#F4D07C;--intune:#FFAD69;--defender:#FF8B7B;--purview:#CDB9FF;--collab:#7FDCC6;--copilot:#F49AD0;--apps365:#C2E88A;--power:#86D3F5;--viva:#E7A8F2;--admin:#A3BDD3;
}}
:root[data-theme="dark"]{
  --sky:#0C1526;--ink:#ECE6D5;--faint:#8593AD;--line:#2C3E5E;--panel:#101C33;--panel-line:#25395B;--control-line:#61749A;--hover:#1A2B4A;--bgstar:#C9D3E8;--halo:.22;
  --entra:#8FB3FF;--exchange:#F4D07C;--intune:#FFAD69;--defender:#FF8B7B;--purview:#CDB9FF;--collab:#7FDCC6;--copilot:#F49AD0;--apps365:#C2E88A;--power:#86D3F5;--viva:#E7A8F2;--admin:#A3BDD3;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--sky);color:var(--ink);font-family:var(--font-body);overflow:hidden;-webkit-font-smoothing:antialiased}
.app{position:relative;height:100%;overflow:hidden}
button{font:inherit;color:inherit}

/* sky */
#sky{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#sky:active{cursor:grabbing}
.bg circle{fill:var(--bgstar)}
.link{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke;transition:opacity var(--dur-base) var(--ease-out)}
#sky.deep .link{opacity:.35}
.cline{fill:none;stroke:var(--c);stroke-width:1;stroke-opacity:.3;vector-effect:non-scaling-stroke;transition:stroke-opacity var(--dur-base) var(--ease-out)}
#sky.deep .cline{stroke-opacity:.5}
.svc-g{transition:opacity var(--dur-base) var(--ease-out)}
#sky.focused .svc-g:not(.is-focus){opacity:.3}
.reveal{animation:rise var(--dur-slow) var(--ease-out) both;animation-delay:calc(var(--i) * 130ms + 150ms)}
@keyframes rise{from{opacity:0}to{opacity:1}}

.node{cursor:pointer;outline:none}
.node .inner{transform:scale(var(--inv,1))}
.focusring{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:0}
.node:focus-visible .focusring{opacity:1}
.lbl{paint-order:stroke;stroke:var(--sky);stroke-width:4px;stroke-linejoin:round;pointer-events:none}

.svc .halo{fill:var(--c);opacity:var(--halo)}
.svc .ring{fill:none;stroke:var(--c);stroke-width:1;opacity:.55}
.svc .spark{fill:var(--c)}
.svc .lbl{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:22px;fill:var(--ink);text-anchor:middle}
.svc:hover .ring{opacity:1}

.cmp .hit{fill:transparent}
.cmp .core{fill:var(--c)}
.cmp .relring{fill:none;stroke:var(--c);stroke-width:1.25;opacity:0}
.cmp.rel .relring{opacity:.9}
.cmp .lbl{font-size:var(--text-sm);fill:var(--ink);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
#sky.deep .cmp .lbl{opacity:.9}
.cmp:hover .lbl,.cmp:focus-visible .lbl,.cmp.sel .lbl,.cmp.rel .lbl{opacity:1}
.cmp.sel .core{stroke:var(--ink);stroke-width:2}
.cmp.sel .lbl{font-weight:600}
.cmp.muted{opacity:.14}

.thread{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.85}

/* top bar */
.top{position:absolute;top:0;left:0;right:0;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 20px;padding:18px 22px 10px;pointer-events:none;z-index:3;transition:right var(--dur-base) var(--ease-out)}
.top>*{pointer-events:auto}
.brand h1{margin:0;font-family:var(--font-display);font-weight:500;font-size:28px;letter-spacing:.005em;line-height:1.1}
.crumbs{margin-top:4px;font-size:var(--text-sm);color:var(--faint);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;min-height:20px}
.crumbs button{background:none;border:0;padding:0;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.crumbs button:hover{text-decoration-color:var(--ink)}
.crumbs .cur{color:var(--ink)}
.tools{display:flex;gap:10px;align-items:center}
.search{position:relative}
.search input,.filter select{height:38px;border:1px solid var(--control-line);background:var(--panel);color:var(--ink);border-radius:8px;padding:0 12px;font:inherit;font-size:var(--text-md)}
.search input{width:240px}
.search input::placeholder{color:var(--faint)}
.filter{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--faint)}
.filter select{padding-right:8px;cursor:pointer}
.filter[hidden]{display:none}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.results{position:absolute;top:44px;left:0;right:0;min-width:260px;margin:0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;box-shadow:var(--shadow-pop);z-index:5}
.results button{display:flex;width:100%;gap:10px;align-items:center;text-align:left;background:none;border:0;padding:8px 8px;border-radius:6px;cursor:pointer;font-size:var(--text-md)}
.results button:hover,.results button:focus-visible{background:var(--hover)}
.results .where{margin-left:auto;font-size:var(--text-xs);color:var(--faint);white-space:nowrap}
.results .empty{padding:8px;font-size:var(--text-sm);color:var(--faint)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}

/* panel */
.panel{position:absolute;top:0;right:0;bottom:0;width:380px;background:var(--panel);border-left:1px solid var(--panel-line);padding:26px 26px 32px;overflow-y:auto;transform:translateX(100%);transition:transform var(--dur-base) var(--ease-out),visibility 0s var(--dur-base);z-index:4;visibility:hidden}
.panel.open{transform:none;visibility:visible;transition-delay:0s}
.panel h2:focus{outline:none}
.panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--panel-line);background:transparent;cursor:pointer;font-size:18px;line-height:1;color:var(--faint)}
.close:hover{color:var(--ink);background:var(--hover)}
.kind{margin:0 40px 6px 0;font-size:var(--text-sm);color:var(--faint)}
.kind button{background:none;border:0;padding:0;cursor:pointer;color:var(--c);font-weight:500}
.kind button:hover{text-decoration:underline}
.panel h2{margin:0 0 12px;font-family:var(--font-display);font-weight:500;font-size:31px;line-height:1.12}
.sum{margin:0 0 16px;font-size:var(--text-lg);line-height:1.6;max-width:60ch}
.licline{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:baseline;margin:0 0 18px;font-size:var(--text-sm);color:var(--faint);line-height:1.5}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;border:1px solid var(--c);color:var(--ink);font-size:var(--text-xs);font-weight:500;white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.btn{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:8px;background:var(--ink);color:var(--panel);text-decoration:none;font-size:var(--text-md);font-weight:500}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--control-line)}
.btn.ghost:hover{background:var(--hover);opacity:1}
.panel h3{margin:0 0 8px;font-size:var(--text-sm);font-weight:600;color:var(--faint)}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--panel-line)}
.list li{border-bottom:1px solid var(--panel-line)}
.list button{display:flex;width:100%;align-items:center;gap:10px;padding:10px 4px;background:none;border:0;text-align:left;cursor:pointer;font-size:var(--text-md)}
.list button:hover{background:var(--hover)}
.list .lic{margin-left:auto;font-size:var(--text-xs);color:var(--faint);white-space:nowrap}
.list .is-muted{color:var(--faint)}
.list .is-muted .dot{background:none;box-shadow:inset 0 0 0 1px var(--c)}

/* chrome */
.foot{position:absolute;left:22px;bottom:14px;font-size:var(--text-xs);color:var(--faint);max-width:46ch;line-height:1.45;z-index:2}
.hint{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);font-size:var(--text-sm);color:var(--faint);background:var(--panel);border:1px solid var(--panel-line);padding:8px 14px;border-radius:999px;white-space:nowrap;transition:opacity var(--dur-base) var(--ease-out);z-index:2}
.hint.gone{opacity:0;pointer-events:none}

@media (min-width:721px){.app.panel-open .top{right:380px}}
@media (max-width:720px){
  .top{padding:12px 14px 8px}
  .brand h1{font-size:23px}
  .tools{width:100%;flex-wrap:wrap}
  .search{flex:1 1 140px}
  .search input{width:100%}
  .filter span{display:none}
  .filter select{max-width:175px}
  #suite-filter{flex:1 1 100%}
  #suite-filter select{max-width:none;width:100%}
  .panel{left:0;right:0;top:auto;width:auto;max-height:56%;border-left:0;border-top:1px solid var(--panel-line);border-radius:16px 16px 0 0;transform:translateY(100%);padding:22px 20px 26px}
  .panel::before{left:0;right:0;top:0;bottom:auto;width:auto;height:3px;border-radius:16px 16px 0 0}
  .panel h2{font-size:26px}
  .foot{left:14px;right:14px;bottom:10px;max-width:none}
  .app.panel-open .foot{display:none}
  .hint{bottom:58px;white-space:normal;text-align:center;width:max-content;max-width:88%}
}
/* touch: 44px targets; small text buttons get an invisible hit area so layout doesn't shift */
@media (pointer:coarse){
  .search input,.filter select,.btn{height:var(--target)}
  .results button,.list button{min-height:var(--target)}
  .close{width:var(--target);height:var(--target);top:8px;right:8px}
  .crumbs button,.kind button{position:relative}
  .crumbs button::after,.kind button::after{content:"";position:absolute;inset:-12px -4px}
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .reveal{animation:none}
  .panel,.top,.svc-g,.link,.cline,.hint,.cmp .lbl{transition:none}
}