/* Layout: a full-bleed radial map (the "seeing stone") with a slim top bar,
   a floating control rail, and a side panel that becomes a bottom sheet on phones. */
:root {
  /* dark-first: dark values live on bare :root */
  --ink: #0b0e14;          /* page ground */
  --ink-2: #121722;        /* raised surfaces */
  --ink-3: #1b2230;        /* chips, inputs */
  --line: #2a3344;         /* hairlines and connectors */
  --line-hot: #e8b75d;     /* lit connectors */
  --fg: #e7e9ee;
  --fg-dim: #9aa3b4;
  --fg-faint: #5d6678;
  --brass: #e8b75d;        /* founder ring, the accent */
  --brass-soft: rgba(232, 183, 93, .16);
  --steel: #7fa7d9;        /* non-founder ring */
  --steel-soft: rgba(127, 167, 217, .16);
  --rev: #d97a6c;          /* Revenue Mafia bracket */
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --node-fill: #161c28;

  --sec-ai: #b49cf2;
  --sec-def: #7fbf8f;
  --sec-sec: #e58f7a;
  --sec-fin: #e8c36a;
  --sec-dev: #6fc3d6;
  --sec-car: #f09ac0;
  --sec-oth: #a7adb9;

  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bar-h: 56px;
  --panel-w: 400px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ink: #f3f1ec; --ink-2: #ffffff; --ink-3: #e9e6df; --line: #cfcabf; --line-hot: #a8701a;
  --fg: #191c22; --fg-dim: #545b67; --fg-faint: #8e93a0;
  --brass: #a8701a; --brass-soft: rgba(168, 112, 26, .14);
  --steel: #3a6ea8; --steel-soft: rgba(58, 110, 168, .13); --rev: #b2483a;
  --shadow: 0 18px 50px rgba(40, 32, 20, .18); --node-fill: #ffffff;
  --sec-ai: #6b4fc4; --sec-def: #2f7d45; --sec-sec: #b6513b; --sec-fin: #9a7413; --sec-dev: #1f7f93; --sec-car: #b4447a; --sec-oth: #6a707c;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--fg);
  font: 14px/1.5 var(--f-body); overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(var(--ink) 55%, transparent);
}
.bar-in {
  height: var(--bar-h); display: flex; align-items: center; gap: 14px;
  padding-inline: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--fg); }
.brand svg { flex: none; }
.brand-name { font: 700 19px/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.brand-name em { font-style: normal; color: var(--brass); }
.brand-sub { font: 500 11px/1 var(--f-mono); color: var(--fg-faint); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.spacer { flex: 1; }

.search { position: relative; width: min(340px, 40vw); }
.search input {
  width: 100%; height: 36px; padding: 0 12px 0 34px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--ink-2); outline: none;
}
.search input:focus { border-color: var(--brass); }
.search svg { position: absolute; left: 11px; top: 11px; color: var(--fg-faint); }
.results {
  position: absolute; top: 42px; left: 0; right: 0; max-height: 60vh; overflow: auto;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  padding: 4px; margin: 0; list-style: none;
}
.results li { padding: 8px 10px; border-radius: 7px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.results li[aria-selected="true"], .results li:hover { background: var(--ink-3); }
.results .r-name { font-weight: 600; }
.results .r-meta { color: var(--fg-dim); font-size: 12px; }
.results .r-kind { margin-left: auto; font: 500 10px/1 var(--f-mono); color: var(--fg-faint); text-transform: uppercase; letter-spacing: .06em; }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center; flex: none;
  border-radius: 9px; border: 1px solid var(--line); background: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { border-color: var(--fg-faint); }

.text-btn {
  height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; flex: none;
  border-radius: 9px; border: 1px solid var(--line); background: var(--ink-2); cursor: pointer; font-size: 13px; color: var(--fg-dim);
}
.text-btn:hover { border-color: var(--fg-faint); color: var(--fg); }

/* ---------- filter strip ---------- */
.filters {
  position: fixed; z-index: 15; left: 16px; right: 16px;
  top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 2px);
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; pointer-events: none;
}
.filters > * { pointer-events: auto; }
.chip {
  height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--ink-2); cursor: pointer; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--fg-faint)); }
.chip[aria-pressed="true"] { border-color: var(--c, var(--brass)); background: color-mix(in srgb, var(--c, var(--brass)) 18%, var(--ink-2)); }
.filters .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.toggle-all { margin-left: auto; }

/* ---------- map ---------- */
#map { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; display: block; }
#map.dragging { cursor: grabbing; }

.ring-guide { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; opacity: .7; }
.edge { fill: none; stroke: var(--line); stroke-width: 1.1; transition: stroke .2s, opacity .3s, stroke-width .2s; }
.edge.also-edge { stroke-dasharray: 3 4; }
.edge.lit { stroke: var(--line-hot); stroke-width: 2; }
.edge.child-edge { stroke: var(--steel); opacity: .55; }
.edge.child-edge.lit { stroke: var(--line-hot); opacity: 1; }

.node { cursor: pointer; transition: opacity .3s; }
.node .disc { fill: var(--node-fill); stroke: var(--line); stroke-width: 1.5; transition: stroke .2s, stroke-width .2s; }
.node.company .disc { stroke: var(--sec, var(--line)); stroke-width: 2; }
.node.founder .disc { stroke: var(--brass); stroke-width: 2.5; }
.node.nonfounder .disc { stroke: var(--steel); stroke-width: 2; stroke-dasharray: 4 3; }
.node.group .disc { stroke: var(--rev); stroke-width: 2; fill: var(--ink-3); }
.node:hover .disc, .node.hot .disc, .node:focus-visible .disc { stroke-width: 4; }
.node:focus { outline: none; }
.node:focus-visible .focus-ring { stroke: var(--brass); stroke-width: 2; fill: none; }
.node .initials { font: 600 14px/1 var(--f-display); fill: var(--fg); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.node.company .initials { font-size: 15px; fill: var(--sec, var(--fg)); letter-spacing: -.02em; }
.node .label { font: 500 11px/1 var(--f-body); fill: var(--fg-dim); pointer-events: none; paint-order: stroke; stroke: var(--ink); stroke-width: 3px; stroke-linejoin: round; }
.node.company .label { font-weight: 600; fill: var(--fg); }
.node .logo-path { fill: var(--sec, var(--fg)); }
.badge rect { fill: var(--brass); }
.badge text { font: 700 10.5px/1 var(--f-mono); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.badge.rev rect { fill: var(--rev); }

.core .orb { fill: var(--ink-2); stroke: var(--brass); stroke-width: 2; }
.core text { font: 700 18px/1 var(--f-display); fill: var(--fg); text-anchor: middle; letter-spacing: .14em; }
.core .core-sub { font: 500 10px/1 var(--f-mono); fill: var(--fg-faint); letter-spacing: .16em; }

.sector-arc { fill: none; stroke-width: 5; stroke-linecap: round; opacity: .8; }
.sector-label { font: 600 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }

.bracket { fill: none; stroke: var(--rev); stroke-width: 1.5; }
.bracket-label { font: 700 11px/1 var(--f-mono); fill: var(--rev); letter-spacing: .1em; text-transform: uppercase; paint-order: stroke; stroke: var(--ink); stroke-width: 3px; }

/* focus mode: dim everything outside the open branch */
.focus .node, .focus .edge, .focus .sector-arc, .focus .sector-label { opacity: .16; }
.focus .in-branch, .focus .edge.in-branch { opacity: 1; }
.filtering .node.dim, .filtering .edge.dim { opacity: .14; }
.filtering .node.match .disc { stroke-width: 4; }

.child { transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.child-edge { transition: stroke-dashoffset .6s ease-out, opacity .3s, stroke .2s; }
@media (prefers-reduced-motion: reduce) {
  .child, .child-edge, .edge, .node { transition: none !important; }
}

/* ---------- control rail ---------- */
.rail {
  position: fixed; z-index: 15; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 6px;
}
.back {
  position: fixed; z-index: 16; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--brass);
  background: var(--ink-2); color: var(--fg); cursor: pointer; box-shadow: var(--shadow); font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}

/* ---------- hover card ---------- */
.tip {
  position: fixed; z-index: 30; width: 290px; pointer-events: none;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 12px 14px; font-size: 13px;
}
.tip-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.tip-name { font: 700 15px/1.2 var(--f-display); }
.tip-title { color: var(--fg-dim); font-size: 12.5px; }
.tip-meta { font: 500 11.5px/1.4 var(--f-mono); color: var(--fg-faint); margin: 4px 0; }
.tip-cta { margin-top: 8px; font-size: 12px; color: var(--brass); font-weight: 600; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--ink-3); font: 700 14px/1 var(--f-display); border: 2px solid var(--brass);
}
.avatar.nf { border-color: var(--steel); border-style: dashed; }
.avatar.co { border-color: var(--sec, var(--line)); border-radius: 10px; color: var(--sec, var(--fg)); }
.avatar img, .avatar svg { width: 100%; height: 100%; object-fit: cover; }
.avatar.co svg { width: 60%; height: 60%; fill: var(--sec, var(--fg)); }

/* ---------- side panel ---------- */
.panel {
  position: fixed; z-index: 25; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 44px); right: 16px; bottom: 16px;
  width: var(--panel-w); max-width: calc(100vw - 32px);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.panel-grip { display: none; }
.panel-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.panel-body { overflow-y: auto; padding: 20px 20px 28px; overscroll-behavior: contain; }
.p-head { display: flex; gap: 14px; align-items: center; padding-right: 40px; }
.p-head .avatar { width: 64px; height: 64px; font-size: 20px; border-width: 3px; }
.p-name { font: 700 22px/1.15 var(--f-display); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.p-title { color: var(--fg-dim); margin-top: 2px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.pill { font: 600 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: var(--ink-3); color: var(--fg-dim); }
.pill.founder { background: var(--brass-soft); color: var(--brass); }
.pill.nonfounder { background: var(--steel-soft); color: var(--steel); }
.pill.rev { background: color-mix(in srgb, var(--rev) 18%, transparent); color: var(--rev); }
.p-sec { margin-top: 20px; }
.p-sec h3 { font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 8px; }
.p-sec p { margin: 0 0 8px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.facts dt { color: var(--fg-faint); font-size: 12.5px; }
.facts dd { margin: 0; min-width: 0; }
.tenure { font-variant-numeric: tabular-nums; }
.quote { border-left: 2px solid var(--brass); padding: 2px 0 2px 12px; color: var(--fg); font-style: italic; margin: 10px 0; }
.cite { margin: -4px 0 10px 14px !important; font-size: 12.5px; color: var(--fg-faint); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.timeline li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; }
.timeline .when { font: 500 12px/1.5 var(--f-mono); color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.co-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.co-card:hover { border-color: var(--fg-faint); }
.co-card .co-top { display: flex; gap: 10px; align-items: center; }
.co-card .co-name { font: 700 15px/1.2 var(--f-display); }
.co-card .co-meta { font-size: 12px; color: var(--fg-dim); }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.people li > button {
  width: 100%; display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px;
  border: 0; background: none; cursor: pointer; text-align: left;
}
.people li > button:hover { background: var(--ink-3); }
.people .avatar { width: 30px; height: 30px; font-size: 11px; border-width: 2px; }
.people .nm { font-weight: 600; }
.people .tt { color: var(--fg-dim); font-size: 12px; }
.people .grp { font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--rev); padding: 10px 8px 4px; }
.ctx { display: grid; gap: 8px; }
.ctx div { font-size: 13px; }
.ctx b { font-weight: 600; }
.sources { margin: 0; padding-left: 18px; font-size: 12.5px; }
.sources a, .links a { color: var(--steel); word-break: break-word; }
.links { display: flex; gap: 12px; flex-wrap: wrap; }
.flags { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--rev); }

.p-suggest { padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-faint); }
.p-suggest a { color: var(--brass); }

/* ---------- suggestion form ---------- */
.sheet {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  background: var(--ink-2); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
}
.sheet::backdrop { background: rgba(5, 7, 12, .6); }
.sheet form { position: relative; padding: 22px 22px 20px; display: grid; gap: 14px; }
.sheet h2 { font: 700 22px/1.15 var(--f-display); margin: 0; padding-right: 40px; }
.sheet-close { position: absolute; top: 14px; right: 14px; }
.sg-lede { margin: -6px 0 0; color: var(--fg-dim); }
.sg-kinds { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sg-kinds legend { padding: 0; margin-bottom: 8px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.sg-kinds label {
  height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-3);
  display: inline-flex; align-items: center; cursor: pointer; font-size: 13px;
}
.sg-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.sg-kinds label:has(input:checked) { border-color: var(--brass); background: var(--brass-soft); color: var(--brass); }
.sg-kinds label:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.sg-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.sg-lab i { font-style: normal; font-weight: 400; color: var(--fg-faint); }
.sg-field input, .sg-field textarea {
  width: 100%; font: 14px/1.45 var(--f-body); color: var(--fg); font-weight: 400;
  background: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
}
.sg-field textarea { resize: vertical; min-height: 96px; }
.sg-field input:focus, .sg-field textarea:focus { outline: none; border-color: var(--brass); }
.sg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sg-msg { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--fg-dim); }
.sg-msg.good { color: var(--sec-def); }
.sg-msg.bad { color: var(--rev); }
.sg-actions { display: flex; justify-content: flex-end; }
.sg-send {
  height: 38px; padding: 0 20px; border-radius: 9px; border: 0; cursor: pointer;
  background: var(--brass); color: var(--ink); font-weight: 600;
}
.sg-send:disabled { opacity: .6; cursor: default; }

/* ---------- footer ---------- */
.foot {
  position: fixed; z-index: 10; left: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  font-size: 11.5px; color: var(--fg-faint); max-width: min(420px, 34vw);
}
.foot a { color: var(--fg-dim); }
.stats { font: 500 11.5px/1.4 var(--f-mono); color: var(--fg-dim); margin-bottom: 4px; font-variant-numeric: tabular-nums; }

/* ---------- phone ---------- */
@media (max-width: 720px) {
  .brand-sub { display: none; }
  .text-btn { width: 36px; padding: 0; justify-content: center; }
  .text-btn span { display: none; }
  .search { width: auto; flex: 1; }
  .spacer { display: none; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .filters::-webkit-scrollbar { display: none; }
  .toggle-all { margin-left: 0; }
  .panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 56vh;
    border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: transform .25s;
  }
  .panel-grip { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 0; flex: none; }
  .panel-body { padding-top: 12px; }
  .back { bottom: calc(56vh + 12px); }
  .back.sheet-closed { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .foot { display: none; }
  .tip { display: none; }
  .rail { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }