/* Company profile: the local ecosystem map (MAR-614) and the founder cards.
   Rendered by renderEcosystemMap / renderTeamProfiles in
   scripts/lib/profile-template-lean.mjs; the live map is js/company-ecosystem-map.js. */

.eco-stage { position: relative; height: 600px; border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; background: var(--navy-light); }
.eco-stage > .eco-live, .eco-stage > .eco-live.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.eco-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-lighter); font-size: 0.875rem; padding: 1rem; text-align: center; }
.eco-stage.is-live .eco-fallback { display: none; }

/* Legend chips sit on the map and switch each layer on and off. */
.eco-legend { position: absolute; top: 12px; left: 12px; right: 56px; display: flex; flex-wrap: wrap; gap: 0.4rem; z-index: 2; pointer-events: none; }
.eco-filter { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border-light); background: var(--surface-card, var(--navy-light)); color: var(--white); border-radius: 999px; padding: 0.35rem 0.75rem; font: 600 0.8125rem/1.2 var(--font-sans); cursor: pointer; box-shadow: 0 1px 3px var(--border-mid); }
.eco-filter[aria-pressed="false"] { color: var(--text-lighter); }
.eco-filter[aria-pressed="false"] .eco-swatch { opacity: 0.3; }
.eco-filter small { color: var(--text-lighter); font-weight: 500; }
.eco-swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--eco-c); flex: none; }

.eco-pin { width: 12px; height: 12px; border-radius: 50%; background: var(--eco-c); border: 2px solid var(--surface-card, var(--navy-light)); box-shadow: 0 1px 4px var(--border-mid); cursor: pointer; transition: transform 0.12s ease; }
.eco-pin:hover, .eco-pin.is-active { transform: scale(1.35); }
.eco-pin.is-subject { width: 20px; height: 20px; background: var(--blue); box-shadow: 0 0 0 5px var(--border-mid); z-index: 2; }
.eco-pin-label { font: 700 0.75rem/1 var(--font-sans); color: var(--white); background: var(--surface-card, var(--navy-light)); border: 1px solid var(--border-light); border-radius: 6px; padding: 0.25rem 0.4rem; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 3px var(--border-mid); }

/* Dark tooltip, the same colours as the chart tooltips. */
.eco-stage .maplibregl-popup { z-index: 3; }
.eco-stage .maplibregl-popup-content { background: var(--chart-tooltip-bg); color: var(--chart-tooltip-ink); border-radius: 10px; padding: 0.7rem 0.85rem; font: 500 0.8125rem/1.45 var(--font-sans); max-width: min(270px, 62vw); box-shadow: 0 8px 24px var(--border-mid); }
.eco-stage .maplibregl-popup-tip { border-top-color: var(--chart-tooltip-bg); border-bottom-color: var(--chart-tooltip-bg); }
.eco-pop-kind { display: flex; align-items: center; gap: 0.35rem; color: var(--chart-tooltip-ink); opacity: 0.65; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.25rem; }
.eco-pop-name { display: block; font-weight: 700; font-size: 0.9375rem; color: var(--chart-tooltip-ink); }
.eco-pop-meta { display: block; color: var(--chart-tooltip-ink); opacity: 0.7; margin-top: 0.15rem; }
.eco-pop-note { display: block; margin-top: 0.35rem; color: var(--chart-tooltip-ink); }
.eco-pop-link { display: inline-block; margin-top: 0.45rem; color: var(--chart-tooltip-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.eco-source { margin-top: 0.75rem; }
[data-eco-list] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.eco-cta { margin: 0.9rem 0 0; color: var(--text-light); font-size: 0.875rem; }
.eco-cta a { color: var(--blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
.eco-cta a:hover { text-decoration: underline; }

/* Related market maps inside the Similar companies card. */
#similar-companies .mmap-rowlabel { margin-top: 1.75rem; }

/* Patent filings: plain ink links, publication number beneath. */
#patents .pp-filing { color: var(--white); font-weight: 400; text-decoration: none; }
#patents .pp-filing:hover { text-decoration: underline; }
#patents .pp-pn { display: block; color: var(--text-lighter); font-size: 0.75rem; margin-top: 0.15rem; }

/* Founders and team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.team-card { border: 1px solid var(--border-light); border-radius: 12px; background: var(--surface-card, var(--navy-light)); padding: 1.1rem 1.2rem; }
.team-top { display: flex; gap: 0.85rem; align-items: center; margin-bottom: 0.75rem; }
.team-photo { object-fit: cover; padding: 0; }
.team-avatar { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--logo-tile-bg); border: 1px solid var(--logo-tile-border); color: var(--blue); font: 700 1.05rem/1 var(--font-display); flex: none; }
.team-name { font: 700 1.125rem/1.2 var(--font-display); color: var(--white); margin: 0; }
.team-role { color: var(--text-light); font-size: 0.875rem; margin-top: 0.15rem; }
.team-badge { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--navy-light); color: var(--blue); font-size: 0.6875rem; font-weight: 700; vertical-align: 2px; }
.team-bio { color: var(--white); font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.75rem; }
.team-facts { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.4rem; }
.team-facts li { display: grid; grid-template-columns: 112px 1fr; gap: 0.6rem; font-size: 0.8125rem; line-height: 1.4; }
.team-facts span:first-child { color: var(--text-lighter); font-weight: 600; }
.team-facts span:last-child { color: var(--white); }
.team-links { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.team-links a { color: var(--blue); font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.team-links a:hover { text-decoration: underline; }
.team-others { margin-top: 1.25rem; }
.team-others h3 { font: 700 0.9375rem/1.3 var(--font-sans); color: var(--white); margin: 0 0 0.5rem; }
.team-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.team-chip { border: 1px solid var(--border-light); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.8125rem; color: var(--white); background: var(--surface-card, var(--navy-light)); }
.team-chip small { color: var(--text-lighter); margin-left: 0.3rem; }

@media (max-width: 900px) {
    .eco-stage { height: 480px; }
}
@media (max-width: 600px) {
    .eco-stage { height: 420px; }
    .eco-legend { right: 48px; }
    .eco-filter { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
    .team-facts li { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* Funding line under the company name (profiles with a timeline). */
.hero-raised { margin: 6px 0 0; color: var(--text-light); font-size: 0.9375rem; }
.hero-raised strong { color: var(--white); font: 700 1.25rem/1 var(--font-display); margin-right: 2px; }

/* Company timeline across the hero (renderTimeline). */
.tl { margin: 4px 0 28px; min-width: 0; }
.tl-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 4px; }
.tl-title { font: 700 0.6875rem/1.2 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); }
.tl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.75rem; color: var(--text-light); }
.tl-key { display: inline-flex; align-items: center; gap: 6px; }
.tl-key i { display: inline-block; flex: none; }
.tl-key-bar { width: 6px; height: 12px; background: var(--blue); border-radius: 1px; }
.tl-key-mile { width: 8px; height: 8px; transform: rotate(45deg); border-radius: 1px; background: var(--white); }
.tl-key-people { width: 12px; height: 12px; border-radius: 50%; background: var(--navy-light); border: 1.5px solid var(--series-c1); }
.tl-stage { position: relative; }
.tl-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.tl-axis { stroke: var(--border-mid); stroke-width: 1.5; }
.tl-tick { stroke: var(--border-mid); stroke-width: 1.5; }
.tl-year { fill: var(--text-lighter); font-size: 12px; }
.tl-svg .tl-hit, .tl-mile rect.tl-hit { fill: transparent; stroke: none; }
.tl-round, .tl-mile, .tl-people { cursor: pointer; }
.tl-bar { fill: var(--blue); }
.tl-round:hover .tl-bar, .tl-round.is-on .tl-bar { fill: var(--white); }
.tl-mile .tl-dia { fill: var(--white); stroke: var(--surface-card, var(--navy-light)); stroke-width: 2.5; }
.tl-mile:hover .tl-dia, .tl-mile.is-on .tl-dia { fill: var(--blue); }
.tl-people circle { fill: var(--navy-light); stroke: var(--series-c1); stroke-width: 1.5; }
.tl-people text { fill: var(--white); font-size: 11px; font-weight: 700; text-anchor: middle; }
.tl-people:hover circle, .tl-people.is-on circle { fill: var(--series-c1); }
.tl-label { fill: var(--white); font-size: 11px; font-weight: 600; }
.tl-label-fund { fill: var(--text-light); font-weight: 600; }
.tl-leader { stroke: var(--border-mid); stroke-width: 1; }
.tl-mile:hover .tl-label, .tl-mile.is-on .tl-label, .tl-round:hover .tl-label, .tl-round.is-on .tl-label { fill: var(--blue); }
.tl-tip { position: absolute; z-index: 5; max-width: 260px; background: var(--chart-tooltip-bg); color: var(--chart-tooltip-ink); border-radius: 8px; padding: 8px 10px; font: 500 0.75rem/1.4 var(--font-sans); pointer-events: none; box-shadow: 0 6px 18px var(--border-mid); }
.tl-tip strong { display: block; font-size: 0.8125rem; margin-bottom: 2px; }
.tl-tip span { display: block; opacity: 0.8; }
@media (max-width: 600px) {
    .tl-stage { overflow-x: auto; }
    .tl-svg { min-width: 900px; }
}

/* Founders in the hero: chips with a hover / focus card (renderHeroPeople). */
.hero-people { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.hp-person { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--border-light); border-radius: 999px; background: var(--surface-card, var(--navy-light)); cursor: default; outline: none; }
.hp-person:hover, .hp-person:focus-within { border-color: var(--border-mid); }
.hp-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--logo-tile-bg); border: 1px solid var(--logo-tile-border); color: var(--blue); font: 700 0.6875rem/1 var(--font-sans); flex: none; }
.hp-name { font: 600 0.875rem/1.2 var(--font-sans); color: var(--white); }
.hp-role { font-size: 0.8125rem; color: var(--text-light); }
.hp-card { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: 360px; max-width: calc(100vw - 40px); background: var(--chart-tooltip-bg); color: var(--chart-tooltip-ink); border-radius: 10px; padding: 12px 14px; font: 500 0.8125rem/1.45 var(--font-sans); box-shadow: 0 10px 28px var(--border-mid); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s; }
.hp-person:hover .hp-card, .hp-person:focus-within .hp-card { opacity: 1; visibility: visible; transform: none; }
.hp-card-name { display: block; font-size: 0.9375rem; }
.hp-card-role { display: block; opacity: 0.7; margin-bottom: 6px; }
.hp-card p { margin: 0 0 8px; }
.hp-card ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.hp-card li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.hp-card li span:first-child { opacity: 0.65; }
.hp-links { display: flex; flex-wrap: wrap; gap: 12px; }
.hp-links a { color: var(--chart-tooltip-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Mini map in the hero, under the access button; opens the full map. */
.company-heading { position: relative; }
.eco-mini { position: absolute; top: 0; right: 0; z-index: 2; width: 280px; height: 150px; padding: 0; border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; background: var(--navy-light); cursor: zoom-in; box-shadow: 0 2px 10px var(--border-mid); }
/* Under the access button when there is one; otherwise level with the name. */
.profile-action + .eco-mini { top: calc(100% + 14px); }
.eco-mini:hover { border-color: var(--border-mid); }
.eco-mini-live { position: absolute; inset: 0; }
.eco-mini-live.maplibregl-map { position: absolute; }
.eco-mini-label { position: absolute; left: 8px; bottom: 8px; z-index: 2; background: var(--surface-card, var(--navy-light)); color: var(--white); border: 1px solid var(--border-light); border-radius: 999px; padding: 3px 9px; font: 600 0.75rem/1.2 var(--font-sans); }
.eco-mini-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--eco-c); border: 1.5px solid var(--surface-card, var(--navy-light)); }
.eco-mini-dot.is-subject { width: 12px; height: 12px; background: var(--blue); box-shadow: 0 0 0 3px var(--border-mid); }
@media (max-width: 1100px) {
    .eco-mini { display: none; }
}

/* Full map in a dialog. */
.eco-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); overflow: hidden; padding: 0; border: 0; border-radius: 14px; background: var(--surface-card, var(--navy-light)); box-shadow: 0 20px 60px var(--border-mid); }
.eco-dialog::backdrop { background: var(--chart-tooltip-bg); opacity: 0.55; }
.eco-dialog .eco-stage { height: min(80vh, 760px); border: 0; border-radius: 0; }
.eco-dialog-close { position: absolute; top: 10px; right: 52px; z-index: 6; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-light); background: var(--surface-card, var(--navy-light)); color: var(--white); font: 400 1.4rem/1 var(--font-sans); cursor: pointer; }

/* Peers on the company's market map (renderPeerBenchmark). */
.pb-list { list-style: none; margin: 8px 0 28px; padding: 0; display: grid; gap: 6px; }
.pb-row { display: grid; grid-template-columns: 32px minmax(180px, 260px) 1fr 96px; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-light); }
.pb-logo { width: 28px; height: 28px; border-radius: 6px; background: var(--logo-tile-bg); border: 1px solid var(--logo-tile-border); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font: 700 0.75rem/1 var(--font-sans); color: var(--text-light); }
.pb-logo img { width: 100%; height: 100%; object-fit: contain; }
.pb-name { font: 600 0.9375rem/1.25 var(--font-sans); color: var(--white); display: flex; flex-direction: column; }
.pb-name a { color: inherit; text-decoration: none; }
.pb-name a:hover { text-decoration: underline; }
.pb-name small { font-weight: 400; font-size: 0.8125rem; color: var(--text-light); }
.pb-track { height: 28px; background: var(--chart-track); position: relative; }
.pb-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--border-mid); }
.pb-row.is-self .pb-bar { background: var(--blue); }
.pb-row.is-self .pb-name { color: var(--blue); }
.pb-value { font: 700 0.9375rem/1 var(--font-display); color: var(--white); text-align: right; }
.pb-none { font: 400 0.8125rem/1 var(--font-sans); color: var(--text-light); }
.pb-sub { font: 600 1rem/1.3 var(--font-sans); color: var(--white); margin: 0 0 10px; }
.pb-segs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pb-seg { border: 1px solid var(--border-light); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; background: var(--surface-card, var(--navy-light)); }
.pb-seg strong { font: 700 1.5rem/1 var(--font-display); color: var(--white); }
.pb-seg span { font-size: 0.875rem; line-height: 1.3; color: var(--white); }
.pb-seg small { font-size: 0.8125rem; color: var(--text-light); }
.pb-seg.is-self { border-color: var(--blue); }
.pb-seg.is-self strong { color: var(--blue); }
.pb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0; font-size: 0.8125rem; color: var(--text-light); }
.pb-foot a { color: var(--blue); font-weight: 600; text-decoration: none; }
@media (max-width: 760px) {
    .pb-row { grid-template-columns: 28px 1fr 80px; }
    .pb-track { grid-column: 2 / 4; grid-row: 2; height: 14px; }
    .pb-segs { grid-template-columns: 1fr 1fr; }
}