/* The company popup, a stop gap until each company's full page is released (owner, 6 Nov 2026). shared/popup.js opens it. */
.cp{position:absolute;inset:auto;margin:0;box-sizing:border-box;max-width:calc(100vw - 32px);padding:10px;background:#FFFDF7;color:#141414;border:3px solid #141414;border-radius:18px;box-shadow:6px 6px 0 #141414;font-family:"Instrument Sans",system-ui,sans-serif}
.cp:popover-open{display:flex;flex-direction:column;gap:10px}
@keyframes cpFade{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){.cp:popover-open{animation:cpFade .15s ease-out}}
.cp-btns{display:flex;flex-wrap:wrap;gap:8px}
.cp-btn,.cp-btn:hover{color:#FFFDF7;text-decoration:none}
.cp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;box-sizing:border-box;background:#141414;border:2px solid #141414;border-radius:999px;font-size:15px;font-weight:700;white-space:nowrap;transition:transform .12s,box-shadow .12s}
.cp-btn:hover{box-shadow:3px 3px 0 #FFC83D;transform:translate(-1px,-1px)}
.cp a:focus-visible{outline:3px solid #FFC83D;outline-offset:2px}
.cp-wait{padding:11px 8px;font-size:15px;line-height:22px;color:#4A4740}
/* the fuller popup, on a Tech, Explained page */
.cp-full{width:340px}
.cp-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.cp-logo{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;box-sizing:border-box;padding:2px;background:#FFFFFF;border:1.5px solid #D9D5CC;border-radius:10px;overflow:hidden}
.cp-logo img{display:block;width:100%;height:100%;object-fit:contain}
.cp-ini{background:#141414;border-color:#141414;color:#FFFDF7;font:800 18px "Bricolage Grotesque",sans-serif}
.cp-name{flex:1 1 0;min-width:120px;font:800 17px/1.15 "Bricolage Grotesque",sans-serif;overflow-wrap:anywhere}
.cp-hire{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;white-space:nowrap}
.cp-hire i{width:9px;height:9px;border:1.5px solid #141414;border-radius:99px}
.cp-more,.cp-more:hover{color:#141414}
.cp-more{font-size:14px;font-weight:700;line-height:1.35;text-decoration:underline;text-underline-offset:2px}
.cp-more:hover{text-decoration-thickness:2px}
/* the card or pill whose popup is open stays lifted, on a phone too, where nothing hovers */
.card:has(> .stretch[aria-expanded="true"]){box-shadow:6px 6px 0 #141414;transform:translate(-3px,-3px)}
.chip[aria-expanded="true"]{box-shadow:2px 2px 0 #141414}
.g-co[aria-expanded="true"] .n-chip{fill:#FFC83D}