Medical Devices Dashboard - Health Care Data

:root{
–ink:#13242e; –ink-soft:#3c4f59; –muted:#7b8a91;
–paper:#f7f5f0; –surface:#ffffff; –surface-2:#f1eee7;
–line:#e1ddd2; –line-strong:#c9c4b6;
–teal:#0e7c86; –teal-deep:#0a5860; –teal-wash:#e3f0f0;
–amber:#a9711a; –amber-wash:#f6ecd8;
–grid-on:#0e7c86; –shadow:0 1px 2px rgba(19,36,46,.06),0 8px 24px -12px rgba(19,36,46,.18);
–r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:’Inter’,-apple-system,BlinkMacSystemFont,’Segoe UI’,sans-serif;
background:var(–paper); color:var(–ink); -webkit-font-smoothing:antialiased;
line-height:1.5;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.mono{font-family:’IBM Plex Mono’,ui-monospace,monospace}
.eyebrow{font-family:’IBM Plex Mono’,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(–muted)}

/* ===== APP BAR ===== */
header.appbar{
position:sticky;top:0;z-index:50;background:rgba(247,245,240,.92);
backdrop-filter:blur(10px);border-bottom:1px solid var(–line);
}
.bar-inner{max-width:1320px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:20px}
.brand{display:flex;flex-direction:column;line-height:1.1;cursor:pointer;flex-shrink:0}
.brand b{font-family:’Space Grotesk’,sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em}
.brand span{font-family:’IBM Plex Mono’,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(–teal)}

/* altitude toggle (signature) */
.altitude{display:flex;align-items:center;gap:0;background:var(–surface-2);border:1px solid var(–line);border-radius:999px;padding:3px;position:relative}
.altitude button{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 16px;border-radius:999px;transition:color .25s}
.altitude button .k{font-family:’Space Grotesk’,sans-serif;font-weight:600;font-size:12px;letter-spacing:.02em}
.altitude button .s{font-family:’IBM Plex Mono’,monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(–muted)}
.altitude .pill{position:absolute;top:3px;bottom:3px;border-radius:999px;background:var(–ink);transition:left .32s cubic-bezier(.6,.05,.1,1),width .32s cubic-bezier(.6,.05,.1,1);z-index:1}
.altitude button[data-on=”1″]{color:#fff}
.altitude button[data-on=”1″] .s{color:rgba(255,255,255,.6)}

.search{margin-left:auto;position:relative;flex:1;max-width:380px}
.search input{width:100%;font-family:’Inter’,sans-serif;font-size:13.5px;padding:9px 12px 9px 34px;border:1px solid var(–line-strong);border-radius:999px;background:var(–surface);color:var(–ink);outline:none;transition:border-color .2s,box-shadow .2s}
.search input:focus{border-color:var(–teal);box-shadow:0 0 0 3px var(–teal-wash)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(–muted)}
.search-results{position:absolute;top:46px;left:0;right:0;background:var(–surface);border:1px solid var(–line);border-radius:var(–r);box-shadow:var(–shadow);max-height:420px;overflow:auto;display:none;z-index:60}
.search-results.show{display:block}
.sr-group{padding:6px 0}
.sr-head{font-family:’IBM Plex Mono’,monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(–muted);padding:6px 14px 4px}
.sr-item{display:flex;align-items:center;gap:9px;padding:7px 14px;font-size:13.5px;cursor:pointer}
.sr-item:hover,.sr-item.active{background:var(–teal-wash)}
.sr-item .tag{margin-left:auto;font-family:’IBM Plex Mono’,monospace;font-size:9px;color:var(–muted);text-transform:uppercase;letter-spacing:.08em}
.sr-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ===== BREADCRUMB ===== */
.crumbs{max-width:1320px;margin:0 auto;padding:10px 22px 0;display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px}
.crumbs a,.crumbs span{font-family:’IBM Plex Mono’,monospace;font-size:11px;letter-spacing:.02em}
.crumbs a{color:var(–muted)}
.crumbs a:hover{color:var(–teal)}
.crumbs .sep{color:var(–line-strong)}
.crumbs .here{color:var(–ink);font-weight:500}

main{max-width:1320px;margin:0 auto;padding:18px 22px 80px}

/* ===== HERO / SECTION HEADS ===== */
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:6px 0 18px;flex-wrap:wrap}
.vhead h1{font-family:’Space Grotesk’,sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,38px);letter-spacing:-.02em;margin:4px 0 0;line-height:1.05}
.vhead .lede{color:var(–ink-soft);font-size:14.5px;max-width:560px;margin-top:8px}
.stat-row{display:flex;gap:26px;flex-shrink:0}
.stat{text-align:right}
.stat b{font-family:’Space Grotesk’,sans-serif;font-size:26px;font-weight:700;display:block;line-height:1}
.stat span{font-family:’IBM Plex Mono’,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(–muted)}

/* ===== CONTROLS ===== */
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.chipfilter{font-family:’IBM Plex Mono’,monospace;font-size:11px;letter-spacing:.03em;padding:6px 11px;border:1px solid var(–line-strong);border-radius:999px;background:var(–surface);color:var(–ink-soft);transition:all .15s}
.chipfilter:hover{border-color:var(–teal)}
.chipfilter[data-on=”1″]{background:var(–ink);color:#fff;border-color:var(–ink)}

/* ===== MACRO MATRIX ===== */
.matrix-wrap{border:1px solid var(–line);border-radius:var(–r);overflow:auto;background:var(–surface);box-shadow:var(–shadow);max-height:74vh}
table.matrix{border-collapse:separate;border-spacing:0;width:100%;font-size:12px}
table.matrix th,table.matrix td{padding:0}
.mx-corner{position:sticky;left:0;top:0;z-index:5;background:var(–surface);border-right:1px solid var(–line);border-bottom:1px solid var(–line-strong)}
.mx-colhead{position:sticky;top:0;z-index:3;background:var(–surface);border-bottom:1px solid var(–line-strong);height:150px;vertical-align:bottom;cursor:pointer;border-left:1px solid var(–line)}
.mx-colhead .rot{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-family:’Inter’,sans-serif;font-weight:500;font-size:11.5px;padding:8px 0 10px;color:var(–ink-soft);max-height:138px;overflow:hidden;text-overflow:ellipsis;margin:0 auto;transition:color .15s}
.mx-colhead:hover .rot{color:var(–teal)}
.mx-colhead .dom{display:block;writing-mode:vertical-rl;transform:rotate(180deg);font-family:’IBM Plex Mono’,monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(–muted);margin:0 auto 4px}
.mx-rowhead{position:sticky;left:0;z-index:2;background:var(–surface);border-right:1px solid var(–line-strong);border-bottom:1px solid var(–line);padding:0 14px;text-align:left;cursor:pointer;min-width:210px;max-width:210px}
.mx-rowhead .cn{font-weight:500;font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:9px 0 8px}
.mx-rowhead:hover .cn{color:var(–teal)}
tr:hover .mx-rowhead{background:var(–teal-wash)}
.mx-cell{border-bottom:1px solid var(–line);border-left:1px solid var(–line);text-align:center;cursor:pointer;height:34px;transition:background .12s}
.mx-cell:hover{background:var(–surface-2)}
.mx-cell.on{background:var(–teal-wash)}
.mx-cell.on:hover{background:#cfe6e6}
.mx-cell .mk{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(–grid-on)}
.mx-rowhead .flag{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(–amber);margin-right:6px;vertical-align:middle}
tr.hl-col-target{}
.legend{display:flex;gap:18px;align-items:center;margin-top:12px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(–muted)}

/* ===== CARDS / GRIDS ===== */
.grid{display:grid;gap:12px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.card{background:var(–surface);border:1px solid var(–line);border-radius:var(–r);padding:15px 16px;transition:border-color .15s,transform .15s,box-shadow .15s;cursor:pointer}
.card:hover{border-color:var(–teal);transform:translateY(-2px);box-shadow:var(–shadow)}
.card h3{font-family:’Space Grotesk’,sans-serif;font-size:15.5px;font-weight:600;margin:0 0 3px;letter-spacing:-.01em}
.card .meta{font-family:’IBM Plex Mono’,monospace;font-size:10.5px;color:var(–muted);letter-spacing:.03em}
.card .cov{margin-top:11px;display:flex;flex-wrap:wrap;gap:5px}
.minichip{font-size:10.5px;font-family:’IBM Plex Mono’,monospace;padding:3px 7px;border-radius:5px;background:var(–surface-2);color:var(–ink-soft);letter-spacing:.01em}
.minichip.more{background:transparent;color:var(–muted)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:7px 13px;border-radius:999px;border:1px solid var(–line-strong);background:var(–surface);transition:all .15s;cursor:pointer}
.chip:hover{border-color:var(–teal);background:var(–teal-wash)}
.chip .n{font-family:’IBM Plex Mono’,monospace;font-size:10.5px;color:var(–muted)}
.chip.teal{background:var(–teal);color:#fff;border-color:var(–teal)}
.chip.teal .n{color:rgba(255,255,255,.7)}
.chip.lg{font-size:14px;padding:9px 16px}

/* company profile */
.profile-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;background:var(–surface);border:1px solid var(–line);border-radius:var(–r);padding:22px 24px;box-shadow:var(–shadow);margin-bottom:22px}
.profile-head .pid{flex:1;min-width:240px}
.profile-head h1{font-family:’Space Grotesk’,sans-serif;font-size:30px;font-weight:700;margin:6px 0 4px;letter-spacing:-.02em;line-height:1.05}
.profile-head .corr{font-size:13px;color:var(–amber);font-family:’IBM Plex Mono’,monospace}
.profile-head .row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:13px;color:var(–ink-soft)}
.profile-head .row a{color:var(–teal);border-bottom:1px solid var(–teal-wash)}
.badge{font-family:’IBM Plex Mono’,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px}
.badge.ok{background:var(–teal-wash);color:var(–teal-deep)}
.badge.warn{background:var(–amber-wash);color:var(–amber)}
.note{font-size:13px;color:var(–ink-soft);background:var(–surface-2);border-left:3px solid var(–line-strong);padding:9px 13px;border-radius:0 6px 6px 0;margin-top:14px}

.section{margin:26px 0}
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.section-head h2{font-family:’Space Grotesk’,sans-serif;font-size:17px;font-weight:600;margin:0;letter-spacing:-.01em}
.section-head .ct{font-family:’IBM Plex Mono’,monospace;font-size:11px;color:#fff;background:var(–ink);padding:2px 8px;border-radius:999px}
.section-head .alt{margin-left:auto;font-family:’IBM Plex Mono’,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(–muted)}

/* micro product groups within company */
.pgroup{background:var(–surface);border:1px solid var(–line);border-radius:var(–r);padding:14px 16px;margin-bottom:11px}
.pgroup .ph{display:flex;align-items:center;gap:9px;margin-bottom:9px;cursor:pointer}
.pgroup .ph b{font-family:’Space Grotesk’,sans-serif;font-size:14px;font-weight:600}
.pgroup .ph .arrow{margin-left:auto;color:var(–teal);font-size:12px;font-family:’IBM Plex Mono’,monospace}
.pgroup .plist{display:flex;flex-wrap:wrap;gap:6px}

/* micro view: taxonomy + matrix */
.split{display:grid;grid-template-columns:1fr;gap:22px}
.cat{background:var(–surface);border:1px solid var(–line);border-radius:var(–r);overflow:hidden;margin-bottom:12px}
.cat .ch{background:var(–surface-2);padding:10px 15px;font-family:’Space Grotesk’,sans-serif;font-weight:600;font-size:13.5px;border-bottom:1px solid var(–line);display:flex;align-items:center;gap:9px}
.cat .ch .n{font-family:’IBM Plex Mono’,monospace;font-size:10px;color:var(–muted);margin-left:auto}
.prow{display:flex;align-items:center;gap:12px;padding:9px 15px;border-bottom:1px solid var(–line);cursor:pointer;transition:background .12s}
.prow:last-child{border-bottom:none}
.prow:hover{background:var(–teal-wash)}
.prow .pname{font-size:13.5px;flex:1}
.prow .makers{display:flex;align-items:center;gap:6px}
.prow .cnt{font-family:’IBM Plex Mono’,monospace;font-size:11px;color:var(–teal-deep);background:var(–teal-wash);padding:2px 8px;border-radius:999px}
.prow .cnt.zero{color:var(–muted);background:var(–surface-2)}
.prow .go{color:var(–teal);font-family:’IBM Plex Mono’,monospace;font-size:11px;opacity:0;transition:opacity .15s}
.prow:hover .go{opacity:1}

/* drill banner */
.drill{display:flex;align-items:center;gap:14px;background:linear-gradient(100deg,var(–ink),var(–teal-deep));color:#fff;border-radius:var(–r);padding:16px 20px;margin:18px 0;cursor:pointer;transition:transform .15s,box-shadow .15s}
.drill:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(14,124,134,.6)}
.drill .zi{font-family:’IBM Plex Mono’,monospace;font-size:34px;line-height:1;font-weight:600;opacity:.85}
.drill .dt b{font-family:’Space Grotesk’,sans-serif;font-size:16px;display:block}
.drill .dt span{font-size:12.5px;opacity:.82}
.drill .arr{margin-left:auto;font-size:22px}
.drill.up{background:linear-gradient(100deg,#33474f,#5a6b71)}

/* empty / misc */
.empty{text-align:center;padding:60px 20px;color:var(–muted)}
.empty b{display:block;font-family:’Space Grotesk’,sans-serif;font-size:18px;color:var(–ink-soft);margin-bottom:6px}
.backlink{display:inline-flex;align-items:center;gap:7px;font-family:’IBM Plex Mono’,monospace;font-size:11px;letter-spacing:.04em;color:var(–teal);margin-bottom:6px;cursor:pointer}
.kbd{font-family:’IBM Plex Mono’,monospace;font-size:10px;border:1px solid var(–line-strong);border-radius:4px;padding:1px 5px;color:var(–muted);background:var(–surface)}

footer{max-width:1320px;margin:0 auto;padding:24px 22px 50px;border-top:1px solid var(–line);color:var(–muted);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer .mono{font-size:10.5px;letter-spacing:.05em}

@media (max-width:720px){
.bar-inner{flex-wrap:wrap;gap:12px}
.search{order:3;max-width:none;flex-basis:100%}
.altitude button{padding:6px 12px}
.profile-head h1{font-size:24px}
main{padding:14px 14px 70px}
.bar-inner{padding:12px 14px}
.crumbs{padding:10px 14px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

Device MapMacro ↔ Micro

/* ============ INDEXES ============ */
const M = DATA.macro, MI = DATA.micro, M2 = DATA.macroToMicro;
const microToMacro = Object.fromEntries(Object.entries(M2).map(([a,b])=>[b,a]));
const companyByName = {};
M.companies.forEach(c=>{ companyByName[c.name]=c; if(c.corrected) companyByName[c.corrected]=companyByName[c.corrected]||c; });
const microLabels = {ent:’ENT / Otolaryngology’,ortho:’Orthopedic’,ophthal:’Ophthalmology’,obgyn:’OB-Gyn / Neonatal’};

// company -> count of macro specialties; specialty -> companies
const specToCompanies = {};
M.specialties.forEach(s=>specToCompanies[s]=[]);
M.companies.forEach(c=>c.specialties.forEach(s=>specToCompanies[s]&&specToCompanies[s].push(c.name)));

// micro: product -> makers, within each specialty
const microIndex = {};
Object.entries(MI).forEach(([k,sp])=>{
const prodMakers={}; const allProducts=[];
sp.categories.forEach(cat=>cat.products.forEach(p=>{prodMakers[p]=[];allProducts.push({cat:cat.name,product:p});}));
sp.companies.forEach(co=>co.products.forEach(p=>{ if(prodMakers[p]) prodMakers[p].push(co.name); }));
microIndex[k]={prodMakers,allProducts,companyByName:Object.fromEntries(sp.companies.map(c=>[c.name,c]))};
});
// which micro specialties a company appears in (with products)
function microProfileFor(name){
const out=[];
Object.entries(MI).forEach(([k,sp])=>{
const co = sp.companies.find(c=>c.name===name || c.name===(companyByName[name]&&companyByName[name].name));
if(co && co.products.length) out.push({key:k,label:microLabels[k],products:co.products});
});
return out;
}

/* ============ ROUTER ============ */
let state={view:’macro’};
function go(view,p={}){ state={view,…p}; const h=’#’+view+(Object.keys(p).length?’/’+encodeURIComponent(JSON.stringify(p)):”); if(location.hash!==h) history.pushState(state,”,h); render(); window.scrollTo({top:0,behavior:’smooth’}); closeSearch();}
window.addEventListener(‘popstate’,e=>{ if(e.state){state=e.state;render();} else {state={view:’macro’};render();} });

/* ============ HELPERS ============ */
function el(t,a={},…kids){const e=document.createElement(t);for(const[k,v]of Object.entries(a)){if(k===’class’)e.className=v;else if(k===’html’)e.innerHTML=v;else if(k.startsWith(‘on’))e.addEventListener(k.slice(2),v);else e.setAttribute(k,v);}kids.flat().forEach(c=>e.appendChild(typeof c===’string’?document.createTextNode(c):c));return e;}
function clear(n){while(n.firstChild)n.removeChild(n.firstChild);}
const ALT={macro:’macro’,specialty:’macro’,company:’both’,micro:’micro’,product:’micro’};

/* ============ VIEWS ============ */
function render(){
setAltitude();
const app=document.getElementById(‘app’);clear(app);
({macro:viewMacro,specialty:viewSpecialty,company:viewCompany,micro:viewMicro,product:viewProduct}[state.view]||viewMacro)(app);
document.getElementById(‘foot-counts’).textContent=`${M.companies.length} companies · ${M.specialties.length} specialties · ${Object.keys(MI).length} micro deep-dives`;
}

/* —- MACRO: coverage matrix —- */
let macroFilter=null;
function viewMacro(app){
crumbs([{label:’Macro landscape’}]);
const companies=[…M.companies].sort((a,b)=>a.name.localeCompare(b.name));
const totalChecks=M.companies.reduce((s,c)=>s+c.specialties.length,0);
app.appendChild(el(‘div’,{class:’vhead’},
el(‘div’,{},
el(‘div’,{class:’eyebrow’},’Altitude · Macro’),
el(‘h1′,{},’Hospital device landscape’),
el(‘p’,{class:’lede’},’Every company against every specialty. Click a column to enter a specialty, a row to open a company, or any cell to jump in. Four specialties drop to micro-level product detail.’)
),
el(‘div’,{class:’stat-row’},
el(‘div’,{class:’stat’},el(‘b’,{},String(M.companies.length)),el(‘span’,{},’Companies’)),
el(‘div’,{class:’stat’},el(‘b’,{},String(M.specialties.length)),el(‘span’,{},’Specialties’)),
el(‘div’,{class:’stat’},el(‘b’,{},String(totalChecks)),el(‘span’,{},’Coverage marks’))
)
));
// domain filters
const domains=[…new Set(M.specialties.map(s=>M.domains[s]||’Other’))];
const ctrl=el(‘div’,{class:’controls’});
ctrl.appendChild(el(‘button’,{class:’chipfilter’,[‘data-on’]:macroFilter?’0′:’1′,onclick:()=>{macroFilter=null;render();}},’All domains’));
domains.forEach(d=>ctrl.appendChild(el(‘button’,{class:’chipfilter’,[‘data-on’]:macroFilter===d?’1′:’0′,onclick:()=>{macroFilter=macroFilter===d?null:d;render();}},d)));
app.appendChild(ctrl);

/* —- MACRO SPECIALTY —- */
function viewSpecialty(app){
const s=state.spec, names=specToCompanies[s]||[], micro=M2[s];
crumbs([{label:’Macro’,go:()=>go(‘macro’)},{label:s}]);
app.appendChild(el(‘div’,{class:’vhead’},
el(‘div’,{},
el(‘div’,{class:’eyebrow’},(M.domains[s]||’Specialty’)),
el(‘h1’,{},s),
el(‘p’,{class:’lede’},names.length+’ companies hold a position here’+(micro?’. This specialty has full micro-level product mapping — drop down to see exactly who makes what.’:’.’))
),
el(‘div’,{class:’stat-row’},el(‘div’,{class:’stat’},el(‘b’,{},String(names.length)),el(‘span’,{},’Companies’)))
));
if(micro){
const sp=MI[micro];
app.appendChild(el(‘div’,{class:’drill’,onclick:()=>go(‘micro’,{key:micro})},
el(‘div’,{class:’zi’},’▾’),
el(‘div’,{class:’dt’},el(‘b’,{},’Zoom to micro — product detail’),
el(‘span’,{},sp.categories.reduce((n,c)=>n+c.products.length,0)+’ products across ‘+sp.categories.length+’ categories · ‘+sp.companies.length+’ mapped companies’)),
el(‘div’,{class:’arr’},’→’)
));
}
app.appendChild(el(‘div’,{class:’section-head’},el(‘h2′,{},’Companies in this specialty’),el(‘span’,{class:’ct’},String(names.length))));
const grid=el(‘div’,{class:’grid cards’});
names.map(n=>companyByName[n]).filter(Boolean).sort((a,b)=>a.name.localeCompare(b.name)).forEach(c=>grid.appendChild(companyCard(c,s)));
app.appendChild(grid);
}

/* —- COMPANY (the bridge) —- */
function viewCompany(app){
const c=companyByName[state.name];
if(!c){app.appendChild(el(‘div’,{class:’empty’},el(‘b’,{},’Company not found’)));return;}
crumbs([{label:’Macro’,go:()=>go(‘macro’)},{label:c.name}]);
const head=el(‘div’,{class:’profile-head’});
const pid=el(‘div’,{class:’pid’});
pid.appendChild(el(‘div’,{class:’eyebrow’},’Company’));
pid.appendChild(el(‘h1’,{},c.name));
if(c.corrected&&c.corrected!==c.name)pid.appendChild(el(‘div’,{class:’corr’},’→ now mapped as ‘+c.corrected));
const row=el(‘div’,{class:’row’});
if(c.website)row.appendChild(el(‘a’,{href:c.website,target:’_blank’,rel:’noopener’},c.website.replace(/^https?:\/\//,”)));
if(c.hq)row.appendChild(el(‘span’,{},’HQ · ‘+c.hq));
if(c.review)row.appendChild(el(‘span’,{class:’badge ‘+(/needs/i.test(c.review)?’warn’:’ok’)},c.review));
pid.appendChild(row);
if(c.status)pid.appendChild(el(‘div’,{class:’note’},c.status));
head.appendChild(pid);
app.appendChild(head);

// MACRO footprint
app.appendChild(el(‘div’,{class:’section-head’},
el(‘h2′,{},’Macro footprint’),el(‘span’,{class:’ct’},String(c.specialties.length)),
el(‘span’,{class:’alt’},’Altitude · Macro’)));
const chips=el(‘div’,{class:’chips’});
if(!c.specialties.length)chips.appendChild(el(‘div’,{class:’empty’,style:’padding:14px’},’No macro specialties marked.’));
c.specialties.forEach(s=>{
const ch=el(‘div’,{class:’chip’+(M2[s]?’ teal’:”),onclick:()=>go(‘specialty’,{spec:s})},s);
if(M2[s])ch.appendChild(el(‘span’,{class:’n’},’▾ micro’));
chips.appendChild(ch);
});
app.appendChild(chips);

// MICRO products
const micro=microProfileFor(c.name);
app.appendChild(el(‘div’,{class:’section-head’,style:’margin-top:28px’},
el(‘h2′,{},’Micro products’),el(‘span’,{class:’ct’},String(micro.reduce((n,m)=>n+m.products.length,0))),
el(‘span’,{class:’alt’},’Altitude · Micro’)));
if(!micro.length){
app.appendChild(el(‘div’,{class:’note’},’No micro-level product detail mapped for this company yet. Micro mapping currently covers ENT, Orthopedic, Ophthalmology and OB-Gyn / Neonatal.’));
} else {
micro.forEach(m=>{
const g=el(‘div’,{class:’pgroup’});
g.appendChild(el(‘div’,{class:’ph’,onclick:()=>go(‘micro’,{key:m.key})},
el(‘b’,{},m.label),
el(‘span’,{class:’minichip’},m.products.length+’ products’),
el(‘span’,{class:’arrow’},’open specialty →’)));
const pl=el(‘div’,{class:’plist’});
m.products.forEach(p=>pl.appendChild(el(‘span’,{class:’chip’,style:’font-size:12px;padding:6px 12px’,onclick:(e)=>{e.stopPropagation();go(‘product’,{key:m.key,product:p});}},p)));
g.appendChild(pl);
app.appendChild(g);
});
}
if(c.notes)app.appendChild(el(‘div’,{class:’note’,style:’margin-top:20px’},’Note · ‘+c.notes));
}

/* —- MICRO SPECIALTY —- */
let microCompanyMode=false;
function viewMicro(app){
const k=state.key, sp=MI[k], idx=microIndex[k], macroName=microToMacro[k];
crumbs([{label:’Macro’,go:()=>go(‘macro’)},{label:macroName||microLabels[k],go:macroName?()=>go(‘specialty’,{spec:macroName}):null},{label:’Micro’}]);
const nProd=sp.categories.reduce((n,c)=>n+c.products.length,0);
app.appendChild(el(‘div’,{class:’vhead’},
el(‘div’,{},
el(‘div’,{class:’eyebrow’},’Altitude · Micro’),
el(‘h1’,{},microLabels[k]),
el(‘p’,{class:’lede’},’Product-level map. Click any product to see its makers, or any company to open its full profile.’)
),
el(‘div’,{class:’stat-row’},
el(‘div’,{class:’stat’},el(‘b’,{},String(nProd)),el(‘span’,{},’Products’)),
el(‘div’,{class:’stat’},el(‘b’,{},String(sp.companies.length)),el(‘span’,{},’Companies’))
)
));
if(macroName)app.appendChild(el(‘div’,{class:’drill up’,onclick:()=>go(‘specialty’,{spec:macroName})},
el(‘div’,{class:’zi’},’▴’),
el(‘div’,{class:’dt’},el(‘b’,{},’Back up to macro’),el(‘span’,{},’See ‘+macroName+’ across the full landscape’)),
el(‘div’,{class:’arr’},’→’)));

if(!microCompanyMode){
sp.categories.forEach(cat=>{
const box=el(‘div’,{class:’cat’});
box.appendChild(el(‘div’,{class:’ch’},cat.name,el(‘span’,{class:’n’},cat.products.length+’ products’)));
cat.products.forEach(p=>{
const makers=idx.prodMakers[p]||[];
const r=el(‘div’,{class:’prow’,onclick:()=>go(‘product’,{key:k,product:p})});
r.appendChild(el(‘div’,{class:’pname’},p));
r.appendChild(el(‘span’,{class:’cnt’+(makers.length?”:’ zero’)},makers.length+(makers.length===1?’ maker’:’ makers’)));
r.appendChild(el(‘span’,{class:’go’},’view →’));
box.appendChild(r);
});
app.appendChild(box);
});
} else {
app.appendChild(el(‘div’,{class:’section-head’},el(‘h2′,{},’Companies mapped here’),el(‘span’,{class:’ct’},String(sp.companies.length))));
const grid=el(‘div’,{class:’grid cards’});
[…sp.companies].sort((a,b)=>a.name.localeCompare(b.name)).forEach(co=>{
const card=el(‘div’,{class:’card’,onclick:()=>go(‘company’,{name:co.name})});
card.appendChild(el(‘h3’,{},co.name));
card.appendChild(el(‘div’,{class:’meta’},(co.location||”)+’ · ‘+co.products.length+’ products’));
const cov=el(‘div’,{class:’cov’});
co.products.slice(0,5).forEach(p=>cov.appendChild(el(‘span’,{class:’minichip’},p)));
if(co.products.length>5)cov.appendChild(el(‘span’,{class:’minichip more’},’+’+(co.products.length-5)));
card.appendChild(cov);
grid.appendChild(card);
});
app.appendChild(grid);
}
}

/* —- MICRO PRODUCT —- */
function viewProduct(app){
const k=state.key, p=state.product, sp=MI[k], idx=microIndex[k];
const makers=idx.prodMakers[p]||[];
const cat=sp.categories.find(c=>c.products.includes(p));
const macroName=microToMacro[k];
crumbs([{label:’Macro’,go:()=>go(‘macro’)},{label:microLabels[k]+’ · Micro’,go:()=>go(‘micro’,{key:k})},{label:p}]);
app.appendChild(el(‘div’,{class:’vhead’},
el(‘div’,{},
el(‘div’,{class:’eyebrow’},(cat?cat.name+’ · ‘:”)+’Product’),
el(‘h1’,{},p),
el(‘p’,{class:’lede’},makers.length?(makers.length+’ mapped ‘+(makers.length===1?’company makes’:’companies make’)+’ this product.’):’No mapped companies make this product yet.’)
),
el(‘div’,{class:’stat-row’},el(‘div’,{class:’stat’},el(‘b’,{},String(makers.length)),el(‘span’,{},’Makers’)))
));
app.appendChild(el(‘div’,{class:’chips’,style:’margin-bottom:24px’},
el(‘div’,{class:’chip’,onclick:()=>go(‘micro’,{key:k})},’▴ All ‘+microLabels[k]+’ products’),
macroName?el(‘div’,{class:’chip’,onclick:()=>go(‘specialty’,{spec:macroName})},’⤒ ‘+macroName+’ (macro)’):document.createTextNode(”)
));
app.appendChild(el(‘div’,{class:’section-head’},el(‘h2′,{},’Who makes it’),el(‘span’,{class:’ct’},String(makers.length))));
if(!makers.length){app.appendChild(el(‘div’,{class:’note’},’No companies in the current mapping are marked for this product.’));return;}
const grid=el(‘div’,{class:’grid cards’});
makers.map(n=>companyByName[n]).filter(Boolean).sort((a,b)=>a.name.localeCompare(b.name)).forEach(c=>grid.appendChild(companyCard(c)));
// fall back for any micro-only name
makers.filter(n=>!companyByName[n]).forEach(n=>grid.appendChild(el(‘div’,{class:’card’,onclick:()=>go(‘company’,{name:n})},el(‘h3’,{},n))));
app.appendChild(grid);
}

/* ============ MICRO PICKER ============ */
function openMicroPicker(){
const app=document.getElementById(‘app’);clear(app);
state={view:’micro_pick’};setAltitude();
crumbs([{label:’Macro’,go:()=>go(‘macro’)},{label:’Choose a micro map’}]);
app.appendChild(el(‘div’,{class:’vhead’},el(‘div’,{},
el(‘div’,{class:’eyebrow’},’Altitude · Micro’),
el(‘h1′,{},’Pick a specialty to zoom into’),
el(‘p’,{class:’lede’},’Micro-level product detail is mapped for these four specialties. The rest of the landscape lives at macro altitude.’))));
const grid=el(‘div’,{class:’grid cards’});
Object.entries(MI).forEach(([k,sp])=>{
const nProd=sp.categories.reduce((n,c)=>n+c.products.length,0);
const card=el(‘div’,{class:’card’,onclick:()=>go(‘micro’,{key:k})});
card.appendChild(el(‘div’,{class:’eyebrow’,style:’margin-bottom:4px’},’Micro deep-dive’));
card.appendChild(el(‘h3’,{},microLabels[k]));
card.appendChild(el(‘div’,{class:’meta’},nProd+’ products · ‘+sp.companies.length+’ companies · ‘+sp.categories.length+’ categories’));
grid.appendChild(card);
});
app.appendChild(grid);
}

/* ============ SEARCH ============ */
const searchIndex=[];
M.companies.forEach(c=>searchIndex.push({type:’company’,label:c.name,sub:c.hq||”,color:’var(–ink)’,go:()=>go(‘company’,{name:c.name})}));
M.specialties.forEach(s=>searchIndex.push({type:’specialty’,label:s,sub:M.domains[s]||”,color:’var(–teal)’,go:()=>go(‘specialty’,{spec:s})}));
Object.entries(MI).forEach(([k,sp])=>sp.categories.forEach(cat=>cat.products.forEach(p=>searchIndex.push({type:’product’,label:p,sub:microLabels[k],color:’var(–amber)’,go:()=>go(‘product’,{key:k,product:p})}))));

/* ============ INIT ============ */
(function init(){
if(location.hash.length>1){
try{const[,view,p]=location.hash.match(/^#([^/]+)(?:\/(.*))?$/);state={view,…(p?JSON.parse(decodeURIComponent(p)):{})};}
catch(e){state={view:’macro’};}
}
render();
window.addEventListener(‘resize’,setAltitude);
})();