/* Guide figures: basics group. Tokens only, so light and dark both work.
   Prefix gb- (guide basics). Used by venture-in-a-portfolio and
   how-a-venture-fund-works. */

/* ---------- shared bits ---------- */
.af-fig .gb-mono{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}

/* ---------- who does what: LP / GP / fund / companies ----------
   Drawn in HTML so it restacks on a phone instead of shrinking. Money in runs
   down the left lane, money back runs up the right lane. */
.af-fig .gb-org{display:grid;gap:0}
.af-fig .gb-org-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.af-fig .gb-box{border:1px solid var(--border-2);background:var(--card);padding:16px 18px;min-width:0}
.af-fig .gb-box.on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
html[data-theme="light"] .af-fig .gb-box.on{background:var(--accent-bg);box-shadow:none;border-color:var(--accent-br)}
.af-fig .gb-box .gb-mono{display:block;margin-bottom:6px}
.af-fig .gb-box h4{font-size:16px;line-height:22px;font-weight:600;color:var(--text);margin:0 0 6px}
.af-fig .gb-box p{font-size:13px!important;line-height:19px!important;color:var(--muted);margin:0!important}
.af-fig .gb-box.on .gb-mono{color:var(--accent)}
html[data-theme="light"] .af-fig .gb-box.on .gb-mono{color:var(--muted-2)}

/* the lanes between tiers: two arrows, one down and one up */
.af-fig .gb-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.af-fig .gb-lane{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 6px}
.af-fig .gb-arr{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 0;
  font-size:12px;line-height:16px;color:var(--muted-2)}
.af-fig .gb-arr::before{content:"";flex:none;align-self:stretch;width:1px;background:var(--border-2);margin-left:7px}
.af-fig .gb-arr::after{content:"";position:absolute;left:3px;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent}
.af-fig .gb-arr.dn::after{bottom:4px;border-top:7px solid var(--border-2)}
.af-fig .gb-arr.up::after{top:4px;border-bottom:7px solid var(--border-2)}
.af-fig .gb-arr.on{color:var(--text)}
.af-fig .gb-arr.on::before{background:var(--accent)}
.af-fig .gb-arr.on.dn::after{border-top-color:var(--accent)}
.af-fig .gb-arr.on.up::after{border-bottom-color:var(--accent)}
.af-fig .gb-links.one{grid-template-columns:1fr}
.af-fig .gb-links.one .gb-lane{max-width:50%;margin:0 auto;width:100%}

.af-fig .gb-cos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin-top:12px}
.af-fig .gb-cos i{display:block;height:14px;background:var(--to-grey-900)}
.af-fig .gb-cos i.w{background:var(--accent)}
html[data-theme="light"] .af-fig .gb-cos i{background:var(--to-grey-300)}
html[data-theme="light"] .af-fig .gb-cos i.w{background:var(--accent)}

@media (max-width:620px){
  .af-fig .gb-org-top,.af-fig .gb-links{gap:8px}
  .af-fig .gb-box{padding:12px 12px}
  .af-fig .gb-box h4{font-size:15px;line-height:20px}
  .af-fig .gb-box p{font-size:12px!important;line-height:17px!important}
  .af-fig .gb-lane{padding:0 2px;gap:6px}
  .af-fig .gb-arr{font-size:11px;line-height:14px;gap:7px}
  .af-fig .gb-links.one .gb-lane{max-width:none}
  .af-fig .gb-cos{grid-template-columns:repeat(8,minmax(0,1fr))}
  .af-fig .gb-cos i:nth-child(n+9){display:none}
}

/* ---------- fund life: phases over a J-curve ----------
   Twelve year columns. Phase bands sit on the same grid as the cumulative cash
   bars beneath them, so a phase lines up with the years it covers. */
.af-fig .gb-life{--gb-cols:12}
.af-fig .gb-ph{display:grid;grid-template-columns:repeat(var(--gb-cols),minmax(0,1fr));gap:4px 3px;margin-bottom:14px}
.af-fig .gb-ph span{display:block;padding:5px 8px;font-size:12px;line-height:16px;color:var(--muted);
  background:var(--surface);border-left:2px solid var(--border-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-fig .gb-ph span.ext{background:none;border:1px dashed var(--border-2);color:var(--muted-2)}
.af-fig .gb-ph span.on{border-left-color:var(--accent);color:var(--text)}

.af-fig .gb-jc{position:relative;display:grid;grid-template-columns:repeat(var(--gb-cols),minmax(0,1fr));gap:3px;
  height:220px}
.af-fig .gb-jc .c{position:relative;display:block}
.af-fig .gb-jc b{position:absolute;left:0;right:0;display:block}
.af-fig .gb-jc b.neg{background:var(--to-grey-900)}
.af-fig .gb-jc b.pos{background:var(--accent)}
html[data-theme="light"] .af-fig .gb-jc b.neg{background:var(--to-grey-300)}
.af-fig .gb-zero{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--border-2);pointer-events:none}
.af-fig .gb-zero em{position:absolute;left:0;top:-20px;font-style:normal}
.af-fig .gb-term{position:absolute;top:-6px;bottom:0;width:0;border-left:1px dashed var(--border-2);pointer-events:none}
.af-fig .gb-term em{position:absolute;right:6px;bottom:0;font-style:normal;white-space:nowrap}
.af-fig .gb-yrs{display:grid;grid-template-columns:repeat(var(--gb-cols),minmax(0,1fr));gap:3px;margin-top:8px}
.af-fig .gb-yrs span{font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2);text-align:center}
.af-fig .gb-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:20px;border-top:1px solid var(--hairline)}
.af-fig .gb-notes div{padding:14px 18px 0;border-left:1px solid var(--hairline)}
.af-fig .gb-notes div:first-child{padding-left:0;border-left:none}
.af-fig .gb-notes .num{display:block;font-family:var(--font-mono);font-size:20px;line-height:26px;color:var(--text)}
.af-fig .gb-notes .on .num{color:var(--accent)}
.af-fig .gb-notes .lbl{display:block;font-size:13px;line-height:18px;color:var(--muted);margin-top:4px}
.af-fig .gb-ph i{font-style:normal}
.af-fig .gb-ph i.s{display:none}
@media (max-width:620px){
  .af-fig .gb-ph i.l{display:none}
  .af-fig .gb-ph i.s{display:inline}
  .af-fig .gb-ph span{padding:4px 5px;font-size:11px}
  .af-fig .gb-yrs span{font-size:9px;letter-spacing:-.02em}
  .af-fig .gb-jc{height:180px}
  .af-fig .gb-notes{grid-template-columns:1fr}
  .af-fig .gb-notes div{padding:12px 0 0;border-left:none}
}

/* ---------- appraisal smoothing line chart ----------
   Uses article-figs .af-line for axes and labels; only the step series and the
   annotation leaders are new. */
.af-fig .af-line .gb-mkt{fill:none;stroke:var(--to-grey-500);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.af-fig .af-line .gb-ven{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:miter}
.af-fig .af-line .gb-dot{fill:var(--accent)}
.af-fig .af-line .gb-lead{fill:none;stroke:var(--border-2);stroke-width:1}
.af-fig .af-line .gb-qt{fill:none;stroke:var(--hairline);stroke-width:1}
.af-fig .af-line .gb-t{font-size:13px;font-weight:600;fill:var(--text)}
.af-fig .af-line .gb-s{font-size:12.5px;fill:var(--muted)}
.af-fig .af-line .gb-k{font-size:13px;fill:var(--muted)}

/* ---------- where venture sits: three sleeves ----------
   Venture in the middle; cash for calls comes from the left, the allocation
   from the right. Restacks to a column on a phone with the arrows turned. */
.af-fig .gb-fit{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1.1fr) 92px minmax(0,1fr);align-items:stretch}
.af-fig .gb-fit .gb-box{display:flex;flex-direction:column}
.af-fig .gb-fit .gb-box ul{list-style:none;margin:8px 0 0;padding:0}
.af-fig .gb-fit .gb-box li{margin:0;padding:0;font-size:13px;line-height:20px;color:var(--muted)}
.af-fig .gb-fit .gb-box li::before{content:none}
.af-fig .gb-fit .gb-box li.on{color:var(--text);font-weight:600}
.af-fig .gb-fit .gb-liq{margin-top:auto;padding-top:14px;border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--muted-2)}
.af-fig .gb-fit .gb-liq b{display:block;font-weight:400;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.af-fig .gb-fit .gb-box > p + ul{margin-top:10px}
.af-fig .gb-fit .gb-box p + .gb-liq,.af-fig .gb-fit .gb-box ul + .gb-liq{margin-top:auto}
.af-fig .gb-fit .gb-box .gb-liq{margin-top:auto}
.af-fig .gb-fit .gb-box > ul{margin-bottom:14px}
.af-fig .gb-hc{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:0 8px;text-align:center;
  font-size:12px;line-height:16px;color:var(--muted-2)}
.af-fig .gb-hc .ln{position:relative;display:block;width:100%;height:1px;background:var(--border-2)}
.af-fig .gb-hc .ln::after{content:"";position:absolute;top:-4px;width:0;height:0;
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.af-fig .gb-hc.r .ln::after{right:-1px;border-left:7px solid var(--border-2)}
.af-fig .gb-hc.l .ln::after{left:-1px;border-right:7px solid var(--border-2)}
.af-fig .gb-hc.on{color:var(--text)}
.af-fig .gb-hc.on .ln{background:var(--accent)}
.af-fig .gb-hc.on.l .ln::after{border-right-color:var(--accent)}
.af-fig .gb-hc.on.r .ln::after{border-left-color:var(--accent)}
.af-fig .gb-never{margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline);font-size:13px;line-height:19px;color:var(--muted)}
.af-fig .gb-never b{color:var(--text);font-weight:600}
@media (max-width:760px){
  .af-fig .gb-fit{grid-template-columns:1fr}
  .af-fig .gb-hc{flex-direction:row;justify-content:flex-start;padding:10px 0 10px 18px;text-align:left;gap:12px}
  .af-fig .gb-hc .ln{width:1px;height:34px;flex:none}
  .af-fig .gb-hc .ln::after{top:auto;left:-4px!important;right:auto!important;border:none!important;
    border-left:4.5px solid transparent!important;border-right:4.5px solid transparent!important}
  .af-fig .gb-hc.r .ln::after{bottom:-1px;border-top:7px solid var(--border-2)!important}
  .af-fig .gb-hc.l .ln::after{top:-1px;border-bottom:7px solid var(--border-2)!important}
  .af-fig .gb-hc.on.r .ln::after{border-top-color:var(--accent)!important}
  .af-fig .gb-hc.on.l .ln::after{border-bottom-color:var(--accent)!important}
  .af-fig .gb-fit .gb-box .gb-liq{margin-top:14px}
}

/* ---------- horizontal bars with token fills ----------
   metrics.css owns .bar-row; the old figures paint their SVG rects with
   literal hex, which breaks in light mode. These take classes instead. */
.af-fig .bar-row .gb-tr{fill:var(--surface)}
.af-fig .bar-row .gb-fl{fill:var(--accent)}
.af-fig .bar-row .gb-fl.mute{fill:var(--to-grey-500)}

/* a scrolling chart says so on a phone, as k-jcurve's .jc-hint does */
.af-fig .gb-hint{display:none;margin:10px 0 0!important;font-size:10px!important;line-height:16px!important}
@media (max-width:600px){ .af-fig .gb-hint{display:block} }