:root{
  --paper:#F7F5F1;
  --panel:#FBFAF6;
  --cell:#EEEDE6;
  --cell-line:#D6D5CE;
  --rule:#E0E0D2;
  --ink:#1A1713;
  --ink-2:#54524E;
  --ink-3:#8F8D89;
  --ink-4:#A5A29A;
  --num:#8A4FD8;
  --up:#0E9F55;
  --down:#E2483D;
  --shadow:rgba(40,32,20,.12);
  --serif:'Cormorant Garamond','EB Garamond',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* dark: near-black ground, dark purple panels, everything else unchanged.
   Currently inert — app.js pins data-theme to "light". Kept intact so the mode
   can be switched back on without rebuilding it. */
:root[data-theme="dark"]{
  --paper:#0B0810;
  --panel:#17102A;
  --cell:#1B1330;
  --cell-line:#332450;
  --rule:#251A3D;
  --ink:#F3EFFA;
  --ink-2:#C3B8D8;
  --ink-3:#8D82A6;
  --ink-4:#6C6288;
  --num:#B98CFF;
  --up:#3BD684;
  --down:#FF6A5E;
  --shadow:rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;flex-direction:column;gap:9px;
  padding:13px 20px 10px;
  background:linear-gradient(to bottom,var(--paper) 58%,transparent);
  pointer-events:none;
}
/* title and controls share the first row; the strips below are rows of their
   own, so the bar grows and reflows instead of being pinned at fixed offsets */
.bar-main{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
#topbar>*{pointer-events:auto}
#title{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.1;margin:0}
#subtitle{
  margin:3px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);
}
.controls{display:flex;align-items:center;gap:13px}
.field{position:relative;display:flex;align-items:center}
#search{
  font-family:var(--mono);font-size:11px;color:var(--ink);
  background:var(--panel);border:1px solid var(--cell-line);border-radius:2px;
  padding:6px 10px;width:220px;outline:none;
}
#search:focus{border-color:var(--ink-3)}
#searchcount{
  position:absolute;right:8px;font-family:var(--mono);font-size:10px;color:var(--ink-3);
  pointer-events:none;background:var(--panel);padding-left:6px;
}
.tog{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.tog input{appearance:none;width:9px;height:9px;border:1px solid var(--ink-4);border-radius:1px;margin:0;cursor:pointer}
.tog input:checked{background:var(--ink);border-color:var(--ink)}
.tog span{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;color:var(--ink-2);text-transform:uppercase}
.zoom{display:flex;gap:3px}
.zoom button{
  font-family:var(--mono);font-size:11px;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--cell-line);border-radius:2px;width:25px;height:23px;cursor:pointer;line-height:1;
}
.zoom button#z-fit{width:32px}
.zoom button:hover{border-color:var(--ink-3);color:var(--ink)}

/* ---------- stage ---------- */
#stage{position:fixed;inset:0;cursor:grab;
  user-select:none;-webkit-user-select:none;overscroll-behavior:none}
#stage,#edges{cursor:inherit}
#stage.dragging{cursor:grabbing}
#edges{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#graph{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

.band-rule{stroke:var(--rule);stroke-width:1}
.rail-name{font-family:var(--serif);font-size:17px;font-weight:600;fill:var(--ink)}
.rail-count{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3);letter-spacing:.05em}
.cell-box{fill:var(--cell);stroke:var(--cell-line);stroke-width:1}
.cell-label{font-family:var(--sans);font-size:11px;fill:var(--ink-2)}
.cell-count{font-family:var(--mono);font-size:9.5px;fill:var(--ink-4)}
.cell-hit{fill:transparent;cursor:pointer}

.flow{fill:none;stroke-linecap:round;opacity:.18}
.link{fill:none;stroke-linecap:round;opacity:.075}
.ribbon{fill:none;stroke-linecap:round;opacity:.5}
.tt-hint{margin-top:7px;padding-top:6px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--ink-4);text-transform:uppercase}

/* focus */
#scene.focused .flow{opacity:.035}
#scene.focused .link{opacity:.05}
#scene.focused .link.hot{opacity:.75;stroke-width:1.4}
#scene.focused .cell-box,#scene.focused .cell-fill{opacity:.35}
#scene.focused .cell-box.hot{opacity:1}
#scene.focused .cell-label,#scene.focused .cell-count{opacity:.35}
#scene.hidelabels .cell-label,#scene.hidelabels .cell-count{display:none}
#scene.noflows #flows,#scene.noflows #ribbons{display:none}
#scene.nolinks #links{display:none}

/* ---------- hover card ---------- */
#tooltip{
  position:fixed;z-index:50;pointer-events:none;
  background:var(--panel);border:1px solid var(--cell-line);
  box-shadow:0 10px 30px var(--shadow);
  padding:11px 14px 10px;min-width:220px;max-width:330px;border-radius:3px;
}
.tt-name{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.2;margin-bottom:5px}
.tt-native{font-weight:400;color:var(--ink-3);margin-left:7px;font-size:15px}
.tt-id{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--ink-3)}
.tt-meta{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--ink-2);margin-top:5px}
.tt-hint{
  font-family:var(--mono);font-size:9px;color:var(--ink-4);
  margin-top:9px;padding-top:7px;border-top:1px solid var(--rule);
}

/* ---------- dossier ---------- */
#dossier{
  position:fixed;top:0;right:0;bottom:0;width:330px;z-index:40;
  background:var(--panel);border-left:1px solid var(--cell-line);
  padding:26px 24px;overflow-y:auto;box-shadow:-12px 0 30px var(--shadow);
}
#dossier-close{position:absolute;top:12px;right:14px;background:none;border:none;
  font-size:20px;color:var(--ink-3);cursor:pointer;line-height:1}
.d-cat{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.d-name{font-family:var(--serif);font-weight:600;font-size:27px;margin:0 0 5px;line-height:1.15}
.d-native{display:block;font-size:16px;font-weight:400;color:var(--ink-3);margin-top:2px}
.d-sub{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.05em}
.d-note{font-size:12.5px;line-height:1.55;color:var(--ink-2);margin:14px 0 0}
.d-lists{margin-top:20px}
.d-lists h3{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);margin:18px 0 7px;padding-bottom:5px;border-bottom:1px solid var(--rule);
}
.d-lists a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-size:12.5px;color:var(--ink);text-decoration:none;padding:3px 0;cursor:pointer}
.d-lists a:hover{color:var(--num)}
.d-lists a em{font-family:var(--mono);font-size:9px;color:var(--ink-4);font-style:normal;white-space:nowrap}

/* ---------- legend ---------- */
#legend{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:8px 20px 10px;
  background:linear-gradient(to top,var(--paper) 58%,transparent);
  pointer-events:none;
}
#legend-cats{display:flex;flex-wrap:wrap;gap:11px;flex:1}
.lg{border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:2px 5px;
  border-radius:99px;display:flex;align-items:center;gap:5px}
.lg:hover{background:var(--rule)}
.lg:focus-visible{outline:2px solid var(--ink-3);outline-offset:1px}
.lg{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:.04em}
.lg i{width:7px;height:7px;display:block;border-radius:1px}
#legend-note{font-family:var(--mono);font-size:8.5px;color:var(--ink-4);text-align:right;max-width:34%;line-height:1.5}

#explorebar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:42px;z-index:45;
  display:flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--paper);border-radius:2px;padding:7px 10px 7px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;
}
#explorebar button{background:none;border:1px solid var(--ink-3);color:var(--paper);
  font-family:var(--mono);font-size:9px;padding:4px 7px;border-radius:2px;cursor:pointer}

#explorebar[hidden],#dossier[hidden],#tooltip[hidden]{display:none}
body.panel #topbar,body.panel #legend{right:330px}
.ribbon.soft{opacity:.22}
.d-source{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:9px;
  letter-spacing:.08em;color:var(--ink-4);text-decoration:none;border-bottom:1px solid var(--rule)}
.d-source:hover{color:var(--ink)}
.d-source[hidden]{display:none}
.d-lists a em b{font-weight:400;color:var(--ink-3);cursor:pointer;text-decoration:underline}

/* ---------- size metric toggle ---------- */
#metric{display:flex;border:1px solid var(--cell-line);border-radius:2px;overflow:hidden;background:var(--panel)}
#metric button{
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  background:none;border:none;color:var(--ink-4);padding:5px 8px;cursor:pointer;line-height:1;
}
#metric button.on{background:var(--ink);color:var(--paper)}

/* ---------- financials ---------- */
.tt-fin{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;color:var(--ink-2);margin-top:6px}
.tt-spark{flex:none;display:block}
.tt-fin b{font-weight:500}
.tt-fin .up{color:var(--up)}
.tt-fin .down{color:var(--down)}

.fin,.rel{margin-top:18px}
.fin h3,.rel h3{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);margin:0 0 9px;padding-bottom:5px;border-bottom:1px solid var(--rule);
}
.fin h3 a,.rel h3 a{float:right;color:var(--ink-4);text-decoration:none;border-bottom:1px solid var(--rule)}
.fin h3 a:hover,.rel h3 a:hover{color:var(--ink)}
.fin-head{display:flex;align-items:baseline;gap:8px}
.fin-val{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1}
.fin-usd{color:var(--ink-2)}
.fin-yr{font-family:var(--mono);font-size:9px;color:var(--ink-4);letter-spacing:.08em}
.fin-growth{font-family:var(--mono);font-size:12px;font-weight:500;margin-top:5px;color:var(--up)}
.fin-growth.down{color:var(--down)}
.fin-growth em{font-style:normal;color:var(--ink-4);font-size:9px;margin-left:5px;letter-spacing:.05em;font-weight:400}
.fin-chart{display:block;margin:13px 0 3px;width:100%}
.fin-chart .cv{font-family:var(--mono);font-size:8.5px;font-weight:500}
.fin-chart .cy{font-family:var(--mono);font-size:8px;fill:var(--ink-4)}
.fin-basis{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.fin-meta,.fin-note{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin-top:8px;line-height:1.5}
.fin-meta .num{color:var(--num);font-weight:500}
.fin-note{color:var(--ink-4);font-size:9px}
.fin-none{font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.04em}
.fin-head.stale .fin-val{color:var(--ink-3)}
.fin-head.stale .fin-yr{color:var(--down)}
.rel p{font-size:12px;line-height:1.5;color:var(--ink-2);margin:0 0 8px}
.rel .num{display:inline;color:var(--num);font-weight:600;font-style:normal;white-space:nowrap}
.rel p > b:first-child{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);font-weight:400;display:block;margin-bottom:2px}
.d-lists a span.d-row-name{display:flex;align-items:baseline;gap:1px}
.d-lists a span i{font-family:var(--mono);font-size:8.5px;color:var(--num);font-style:normal;font-weight:500}
.fin-none{font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.04em}
.fin-head.stale .fin-val{color:var(--ink-3)}
.fin-head.stale .fin-yr{color:#B4442F}
.fin-basis{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.fin-usd{font-family:var(--mono);font-size:10px;color:var(--num);margin-top:3px;font-weight:500}
.fin-usd em{font-style:normal;font-size:8px;color:var(--ink-4);margin-left:6px;letter-spacing:.04em}
.tt-fin i{font-style:normal;color:var(--ink-4)}

/* ---------- flags ---------- */
.fl{font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;
  font-size:11px;margin-right:6px;letter-spacing:0}
.d-sub .fl{font-size:13px}
.d-lists a span b.fl{font-size:10px;margin-right:5px}

/* ---------- cell card lists ---------- */
.tt-sec{margin-top:10px}
.tt-lab{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:5px}
.tt-sec ul{list-style:none;margin:0;padding:0}
.tt-sec li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2);padding:1.5px 0}
.tt-sec li i{width:6px;height:6px;border-radius:1px;flex:none}
.tt-sec li span{flex:1}
.tt-sec li em{font-family:var(--mono);font-size:8.5px;color:var(--num);font-style:normal;white-space:nowrap;font-weight:500}


/* dark mode: dots sit on a darker ground, so lift the cell plate slightly */
:root[data-theme="dark"] .cell-box{fill:var(--cell);stroke:var(--cell-line)}
:root[data-theme="dark"] .fin-chart rect{filter:saturate(1.15) brightness(1.12)}
:root[data-theme="dark"] .tog input:checked{background:var(--num);border-color:var(--num)}
:root[data-theme="dark"] #metric button.on{background:var(--num);color:#0B0810}

#theme{
  font-family:var(--mono);font-size:11px;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--cell-line);border-radius:2px;width:26px;height:23px;cursor:pointer;line-height:1;
}
#theme:hover{border-color:var(--ink-3);color:var(--ink)}

/* ---------- concentration ---------- */
.cc{margin-top:18px}
.cc h3{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);margin:0 0 11px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
.cc h3 a{float:right;color:var(--ink-4);text-decoration:none;border-bottom:1px solid var(--rule)}
.cc h3 a:hover{color:var(--ink)}
.cc-side + .cc-side{margin-top:15px;padding-top:13px;border-top:1px dashed var(--rule)}
.cc-lab{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:6px}
.cc-meter{position:relative;height:10px;border-radius:2px;background:var(--rule);overflow:hidden}
.cc-meter span{position:absolute;left:0;top:0;bottom:0;border-radius:2px}
.cc-top{opacity:.34}
.cc-lg{opacity:1}
.cc-key{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin-top:5px}
.cc-none{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin-top:4px}
.cc-note{font-family:var(--mono);font-size:8.5px;color:var(--ink-4);margin-top:6px;line-height:1.5}
.cc-named{list-style:none;margin:9px 0 0;padding:0}
.cc-named li{display:flex;align-items:center;gap:8px;padding:2.5px 0}
.cc-named .n{width:98px;flex:none;font-size:11px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-named .b{flex:1;height:7px;background:var(--rule);border-radius:2px;overflow:hidden}
.cc-named .b i{display:block;height:100%;border-radius:2px}
.cc-named .p{width:42px;text-align:right;font-family:var(--mono);font-size:9px}

/* ===========================================================================
   viz2 — sharper, higher-contrast, responsive. Overrides the inherited sheet.
   =========================================================================== */
:root{
  --paper:#FCFCFD;
  --panel:#FFFFFF;
  --cell:#F4F4F6;
  --cell-line:#DCDCE3;
  --rule:#E8E8EE;
  --ink:#09090B;
  --ink-2:#3F3F46;
  --ink-3:#71717A;
  --ink-4:#A1A1AA;
  --num:#6D28D9;
  --up:#059669;
  --down:#DC2626;
  --shadow:rgba(9,9,11,.10);
}
body{font-feature-settings:"tnum" 1,"cv05" 1}
#title{font-family:var(--sans);font-weight:650;font-size:20px;letter-spacing:-.022em}
#subtitle{font-size:9.5px;letter-spacing:.1em;color:var(--ink-3)}
.rail-name{font-family:var(--sans);font-size:13px;font-weight:650;letter-spacing:-.012em;fill:var(--ink)}
.rail-count{font-size:9px;fill:var(--ink-3)}
.cell-label{font-family:var(--sans);font-size:10.5px;font-weight:500;fill:var(--ink-2)}
.cell-count{font-size:9px;fill:var(--ink-4)}
.cell-box{fill:var(--cell);stroke:var(--cell-line);stroke-width:1}
.band-rule{stroke:var(--rule)}
.link{opacity:.3}
.flow{opacity:.1}
#scene.focused .link{opacity:.06}
#scene.focused .link.hot{opacity:.92}
.link.khide{display:none}
.fin-val{font-family:var(--sans);font-weight:650;font-size:22px;letter-spacing:-.02em}
.tt-name{font-family:var(--sans);font-weight:650;font-size:16px;letter-spacing:-.015em}
.d-name{font-family:var(--sans);font-weight:650;font-size:22px;letter-spacing:-.02em}

/* deal-kind filter */
#kinds{display:flex;flex-wrap:wrap;gap:5px;pointer-events:auto}
#kinds button{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;
  background:var(--panel);border:1px solid var(--cell-line);border-radius:99px;
  color:var(--ink-2);padding:3px 9px;cursor:pointer;line-height:1.5;
}
#kinds button:hover{border-color:var(--ink-3)}
#kinds button.off{color:var(--ink-4);background:transparent;text-decoration:line-through;opacity:.55}

/* deal rows in the dossier */
.d-lists a i.deal{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:2px;font-style:normal}
.d-lists a i.deal b.num{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--num)}
.d-lists a i.deal u{
  font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-4);border:1px solid var(--rule);border-radius:2px;padding:1px 4px;
}
.d-lists a i.deal u.warn{color:#B45309;border-color:#FCD34D;background:#FFFBEB}

/* responsive: the rail folds away and the panel goes full width */
@media (max-width:900px){
  #topbar{gap:7px;padding:10px 14px 8px}
  .bar-main{gap:10px}
  .controls{flex-wrap:wrap;gap:8px}
  #search{width:150px}
  #totals .t-note{display:none}
  #totals span{padding-right:9px;margin-right:9px}
  #dossier{width:100%;box-shadow:none}
  body.panel #topbar,body.panel #legend{right:0}
  #legend-note{display:none}
  #legend-cats{gap:7px}
}
@media (max-width:560px){
  #title{font-size:16px}
  .zoom,#metric{display:none}
  /* keep the four largest totals; the rest would wrap into a wall */
  #totals span:nth-child(n+5){display:none}
  #kinds button{font-size:7.5px;padding:3px 6px}
  #legend{display:none}
}
.link.dead{opacity:.14;stroke-dasharray:1.5 3}
.d-lists a i.deal u.st{color:#9A3412;border-color:#FDBA74;background:#FFF7ED}
.d-lists a i.deal u.st-abandoned,.d-lists a i.deal u.st-never-happened{
  color:#991B1B;border-color:#FCA5A5;background:#FEF2F2}
.tt-flow{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:4px}
.tt-flow .num{color:var(--num);font-weight:600}
.tt-meta{max-width:300px}

/* ===========================================================================
   Terminal register: hairlines, squares, no curves in the chrome, mono-forward.
   =========================================================================== */
:root{
  --paper:#FFFFFF;
  --panel:#FFFFFF;
  --cell:#FBFBFC;
  --cell-line:#D4D4D8;
  --rule:#EAEAEE;
  --ink:#0A0A0B;
  --ink-2:#3F3F46;
  --ink-3:#71717A;
  --ink-4:#9CA3AF;
  --num:#5B21B6;
  --shadow:rgba(9,9,11,.13);
}
body{background:
  linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/64px 100%,
  var(--paper);
}
#topbar{padding:11px 18px 8px;border-bottom:1px solid var(--rule);background:var(--paper);position:fixed}
#title{font-size:15px;font-weight:700;letter-spacing:-.01em;text-transform:uppercase}
#subtitle{font-size:9px;letter-spacing:.14em;color:var(--ink-4);margin-top:2px}

/* totals strip */
#totals{display:flex;flex-wrap:wrap;gap:0;pointer-events:auto;align-items:stretch}
#totals span{display:flex;flex-direction:column;gap:1px;padding:3px 12px 3px 0;margin-right:12px;border-right:1px solid var(--rule)}
#totals em{font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);font-style:normal}
#totals b{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
#totals .t-note{border:0;justify-content:center;font-family:var(--mono);font-size:7.5px;color:var(--ink-4);letter-spacing:.05em;max-width:220px}
#kinds{gap:0}
#kinds button{border-radius:0;border-right:0;font-size:8px;padding:3px 8px}
#kinds button:last-child{border-right:1px solid var(--cell-line)}
#kinds button.off{text-decoration:none;background:var(--rule);color:var(--ink-4)}

/* canvas objects */
.cell-box{fill:var(--cell);stroke:var(--cell-line);stroke-width:1}
.cell-fill{pointer-events:none}
.cell-label{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.01em;fill:var(--ink-2)}
.cell-count{font-family:var(--mono);font-size:9px;fill:var(--ink-3)}
.rail-name{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.16em}
.rail-count{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3);letter-spacing:.05em}
.band-rule{stroke:var(--rule);stroke-width:1}
.link{opacity:.26;stroke-linecap:butt}
.flow{opacity:.07}
#scene.focused .link{opacity:.045}
#scene.focused .link.hot{opacity:1}

/* chrome */
#search,.zoom button,#metric,#theme{border-radius:0}
#search{font-size:10.5px}
#metric button{border-radius:0;font-size:8px}
#tooltip,#dossier{border-radius:0}
#tooltip{border:1px solid var(--ink);box-shadow:4px 4px 0 var(--shadow)}
.tt-name{font-size:15px;font-weight:700;letter-spacing:-.01em}
.d-name{font-size:20px;font-weight:700;letter-spacing:-.015em}
.d-lists a{border-bottom:1px solid var(--rule);padding:6px 0}
.d-lists h3{border-bottom:1px solid var(--ink);color:var(--ink)}
.fin h3,.cc h3,.rel h3{border-bottom:1px solid var(--ink);color:var(--ink)}
#legend{border-top:1px solid var(--rule);background:var(--paper);padding:7px 18px}
#legend-note{font-size:8px}
@media (max-width:900px){
  #totals,#kinds{position:static;margin-top:6px}
  #totals span{padding-right:8px;margin-right:8px}
}
.fin-seg{margin-top:11px;border-top:1px solid var(--rule);padding-top:8px}
.fin-seg .sg{display:flex;align-items:baseline;gap:8px;padding:2px 0}
.fin-seg .sg-n{flex:1;font-size:11px;color:var(--ink-2)}
.fin-seg .sg-v{font-family:var(--mono);font-size:10.5px;font-weight:600}
.fin-seg .sg-y{font-family:var(--mono);font-size:8.5px;color:var(--ink-4)}
.vals{margin-bottom:12px}
.val-row{display:flex;align-items:baseline;gap:9px;padding:1px 0}
.val-lab{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);width:64px;flex:none}
.val-num{font-family:var(--sans);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.val-sub{font-family:var(--mono);font-size:12px;font-weight:600}
.age{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:1px 5px;border:1px solid;border-radius:2px;white-space:nowrap}
.age.fresh{color:#047857;border-color:#A7F3D0;background:#ECFDF5}
.age.aging{color:#B45309;border-color:#FDE68A;background:#FFFBEB}
.age.stale{color:#B91C1C;border-color:#FECACA;background:#FEF2F2}

/* ---------- interaction performance ----------
   While the canvas is being zoomed or panned, drop everything that costs paint
   time and cannot be read in motion anyway: the structural ribbons, the cell
   labels, anti-aliasing and hit-testing. All of it returns 140ms after the last
   input, which is faster than the eye settles. */

/* Only text is worth hiding mid-gesture now; the graph itself is on canvas
   and moves with the view instead of being blanked. */
#graph.interacting #labels,
#graph.interacting #rail{display:none}
#graph.interacting #scene{shape-rendering:optimizeSpeed;pointer-events:none}

/* ---------- roles, derived from the edges ---------- */
.roles{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px}
.role{
  font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border:1px solid;border-radius:2px;line-height:1.4;
}
.role-investor{color:#5B21B6;border-color:#DDD6FE;background:#F5F3FF}
.role-lender  {color:#7C2D12;border-color:#FED7AA;background:#FFF7ED}
.role-supplier{color:#075985;border-color:#BAE6FD;background:#F0F9FF}
.role-customer{color:#166534;border-color:#BBF7D0;background:#F0FDF4}
.role-acquirer{color:#831843;border-color:#FBCFE8;background:#FDF2F8}
.role-partner {color:#3F3F46;border-color:#E4E4E7;background:#FAFAFA}
.d-roles{margin-top:8px}

/* ---------- rounded register ---------- */
#search,.zoom button,#metric,#theme{border-radius:6px}
#metric button{border-radius:0}
#metric{overflow:hidden}
#kinds button{border-radius:99px;border-right:1px solid var(--cell-line);margin-right:3px}
#tooltip,#dossier{border-radius:10px}
#tooltip{box-shadow:0 10px 34px var(--shadow)}
.role{border-radius:99px}
.d-lists a i.deal u{border-radius:99px}
.age{border-radius:99px}
#totals span{border-right:0}


/* ---------- panel: counterparties grouped by role ---------- */
.d-lists h3{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.d-lists h3 em{
  font-family:var(--mono);font-size:8.5px;font-style:normal;letter-spacing:.06em;
  color:var(--ink-4);text-transform:none;font-weight:400;white-space:nowrap;
}
.d-lists b.src{
  font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:.02em;
  color:var(--ink-3);border-bottom:1px dotted var(--ink-4);cursor:pointer;
}
.d-lists b.src:hover{color:var(--ink);border-bottom-color:var(--ink)}
/* the row's right-hand column used to be nowrap, so publisher names ran off
   the edge of the panel the moment a deal carried two sources */
.d-lists a em{
  white-space:normal;text-align:right;max-width:56%;
  overflow-wrap:anywhere;line-height:1.5;
}
.d-lists a span.d-row-name{min-width:0}

/* what kind of figure this is — a run-rate is not a reported year */
.fin-basis u{
  text-decoration:none;font-weight:600;letter-spacing:.1em;
  color:#B45309;border:1px solid #FCD34D;background:#FFFBEB;
  border-radius:99px;padding:1px 6px;
}


/* the row whose edge is being traced on the board */
.d-lists a:hover{background:var(--rule);border-radius:6px}
.d-lists a{transition:background .12s ease}
@media (prefers-reduced-motion: reduce){.d-lists a{transition:none}}


/* ---------- legibility pass ----------------------------------------------
   The greys were set for a denser board and read as washed out against paper.
   These darken the mid tones, give the counts real weight, and let the small
   print at the foot of the page actually be read. */

:root{
  --ink-2:#3D3B37;      /* was #54524E */
  --ink-3:#6B6963;      /* was #8F8D89 — the main offender */
  --ink-4:#83807A;      /* was #A5A29A */
}

/* band header: the company and deal totals carry the band, so give them weight */
.rail-count{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.02em;fill:var(--ink-2);
}
.rail-name{font-size:13.5px;font-weight:700;letter-spacing:.15em}

/* cell labels and their counts */
.cell-label{font-size:10.5px;font-weight:650;fill:var(--ink)}
.cell-count{font-family:var(--mono);font-size:9.5px;font-weight:600;fill:var(--ink-2)}

/* the headline totals across the top */
#totals b{font-size:14px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
#totals em{font-size:8px;font-weight:600;color:var(--ink-3)}
#totals .t-note{font-size:8.5px;color:var(--ink-3);max-width:250px}
#subtitle{font-size:10px;color:var(--ink-3);letter-spacing:.12em}

/* the foot of the page */
#legend{padding:9px 20px 11px}
#legend .lg{font-size:11.5px;color:var(--ink-2)}
#legend-note{font-size:10px;line-height:1.55;color:var(--ink-3);max-width:42%}

/* panel figures */
.d-lists a{font-size:12.5px}
.d-lists a em{font-size:9.5px;color:var(--ink-3)}
.d-lists a i.deal b.num{font-size:11px;font-weight:700}
.d-lists h3 em{font-size:9px;color:var(--ink-3)}
.d-lists b.src{font-size:8.5px;color:var(--ink-3)}
.fin-yr,.val-lab,.fin-basis{color:var(--ink-3)}

@media (max-width:900px){ #legend-note{display:none} }


/* Board text sits on top of dense ribbon bundles, so a paper-coloured outline
   is drawn behind the glyphs — the label stays legible wherever it lands
   instead of only where the board happens to be empty. */
.cell-label,.cell-count,.rail-name,.rail-count{
  paint-order:stroke;
  stroke:var(--paper);
  stroke-width:3.2px;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.cell-count{font-size:10px;font-weight:700;fill:var(--ink)}
.rail-count{font-size:12px;font-weight:700;fill:var(--ink)}


/* ---------- named customers (panel only) ---------- */
.cust{margin-top:16px}
.cust h3{display:block;border-bottom:1px solid var(--ink);color:var(--ink)}
/* the count sits under the title rather than beside it: "Named customers" wraps
   in a 330px panel and was colliding with its own metadata */
.cust h3 em{display:block;margin-top:2px;font-family:var(--mono);font-size:8.5px;
  font-style:normal;letter-spacing:.06em;color:var(--ink-3);font-weight:400;text-transform:none}
.cu-sec{margin-top:9px}
.cu-lab{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:3px}
.cust ul{list-style:none;margin:0;padding:0}
.cust li{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:3px 0;border-bottom:1px solid var(--rule);font-size:12px}
.cu-n{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.cu-n a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--ink-4)}
.cu-n a:hover{border-bottom-color:var(--ink)}
.cu-m{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:flex-end;text-align:right}
.cu-m b.num{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--num)}
.cu-m u{font-family:var(--mono);font-size:8px;text-decoration:none;letter-spacing:.05em;
  color:var(--ink-3);border:1px solid var(--rule);border-radius:99px;padding:1px 5px;white-space:nowrap}
.cu-note{font-size:10px;color:var(--ink-3);margin-top:7px;line-height:1.5}
.cu-src{font-family:var(--mono);font-size:8.5px;margin-top:5px}
.cu-src a{color:var(--ink-3);border-bottom:1px dotted var(--ink-4);text-decoration:none}


/* ---------- deal rows: rewritten to stack, not fight for columns ----------
   Every row used to force two flex children ("name+chips" and "sector+
   sources") into opposite ends of one line via space-between. That works
   only while both sides stay short. The moment a row carried a real
   explanation (d.measures, up to ~190 chars) or two source hostnames next to
   a long sector name, the right-hand column wrapped raggedly against a fixed
   max-width and the whole row stopped reading as one thing. Rows now stack
   top to bottom -- name, then the value/kind/date chips, then an optional
   note, then sector + sources -- and a line only takes space if it has
   content. This is also why the old free-text note rendered as one giant
   broken-looking pill: it was wrapped in the same badge markup as short tags
   like "compute" or a date. It gets a plain note line instead. */
.d-lists a{
  display:flex;flex-direction:column;align-items:stretch;gap:4px;
  padding:9px 4px;border-bottom:1px solid var(--rule);border-radius:6px;
}
.d-lists a:last-child{border-bottom:none}
.d-row-name{
  display:flex;align-items:baseline;gap:1px;
  font-size:13px;font-weight:600;color:var(--ink);
}
.d-lists i.deal{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  font-style:normal;
}
.d-row-note{
  font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--ink-3);
  padding:1px 0 2px;max-width:100%;overflow-wrap:break-word;
}
.d-row-meta{
  font-family:var(--mono);font-size:10px;color:var(--ink-3);
  white-space:normal;overflow-wrap:break-word;line-height:1.6;
}
.d-row-meta b.src{
  font-weight:600;color:var(--ink-2);
  border-bottom:1px solid var(--rule);cursor:pointer;
}
.d-row-meta b.src:hover{color:var(--num);border-bottom-color:var(--num)}