/* Guide figures: allocation group. Tokens only, so light and dark both work.
   Prefix gfa-. Used by how-much-to-allocate, vetting-a-venture-fund,
   reading-fund-reports and after-your-client-commits. */

/* Shared: a hatch for "size unknown" spans, drawn from a token so it shows on
   white as well as on ink. */
.af-fig .gfa-hatch{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--border-2) 4px 5px)}

/* ---------- vintage lanes (how-much-to-allocate) ----------
   One lane per commitment across a 17-year ruler. The calling years take the
   one colour; the exit window is hatched because its size and timing are not
   known. A label column on the left, which moves above the lane on a phone. */
.af-fig .gfa-lanes{display:grid;gap:0}
.af-fig .gfa-lane{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--hairline)}
.af-fig .gfa-lane:last-of-type{border-bottom:none}
.af-fig .gfa-lane .nm{font-size:14px;line-height:19px;color:var(--text);font-weight:600}
.af-fig .gfa-lane .nm small{display:block;font-family:var(--font-mono);font-size:11px;line-height:16px;
  font-weight:400;color:var(--muted-2)}
.af-fig .gfa-track{display:grid;grid-template-columns:repeat(17,minmax(0,1fr));height:22px;
  background:var(--surface)}
.af-fig .gfa-track .c{grid-row:1;background:var(--accent)}
.af-fig .gfa-track .x{grid-row:1;border:1px solid var(--border-2);
  background:repeating-linear-gradient(135deg,transparent 0 4px,var(--border-2) 4px 5px)}
.af-fig .gfa-axis{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;margin-top:6px}
.af-fig .gfa-axis .tk{display:grid;grid-template-columns:repeat(17,minmax(0,1fr))}
.af-fig .gfa-axis .tk span{font-family:var(--font-mono);font-size:10.5px;line-height:16px;color:var(--faint);text-align:center}
.af-fig .gfa-axis .ttl{font-family:var(--font-mono);font-size:10.5px;line-height:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);text-align:right}
.af-fig .gfa-key{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:16px}
.af-fig .gfa-key .k{display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;color:var(--muted)}
.af-fig .gfa-key .k::before{content:"";width:12px;height:12px;flex:none;background:var(--accent)}
.af-fig .gfa-key .k.x::before{border:1px solid var(--border-2);
  background:repeating-linear-gradient(135deg,transparent 0 3px,var(--border-2) 3px 4px)}
.af-fig .gfa-key .k.g::before{background:var(--to-grey-500)}
.af-fig .gfa-key .k.h::before{border:1px solid var(--to-grey-500);
  background:repeating-linear-gradient(135deg,transparent 0 3px,var(--to-grey-500) 3px 4px)}

/* The listing count under the lanes: two plain bars against a shared scale. */
.af-fig .gfa-ipo{margin-top:26px;padding-top:20px;border-top:1px solid var(--hairline)}
.af-fig .gfa-ipo .hd{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.af-fig .gfa-hb{display:grid;grid-template-columns:118px minmax(0,1fr) 56px;gap:14px;align-items:center;padding:6px 0}
.af-fig .gfa-hb .l{font-size:14px;line-height:19px;color:var(--muted)}
.af-fig .gfa-hb .t{height:18px;background:var(--surface)}
.af-fig .gfa-hb .t b{display:block;height:100%;background:var(--to-grey-500)}
.af-fig .gfa-hb .v{font-family:var(--font-mono);font-size:13px;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}

@media (max-width:620px){
  .af-fig .gfa-lane{grid-template-columns:1fr;gap:6px}
  .af-fig .gfa-axis{grid-template-columns:1fr}
  .af-fig .gfa-axis .ttl{text-align:left}
  .af-fig .gfa-axis .tk span:nth-child(even){visibility:hidden}
  .af-fig .gfa-hb{grid-template-columns:64px minmax(0,1fr) 40px;gap:10px}
}

/* ---------- cross-fund conflict (vetting-a-venture-fund) ----------
   Three nodes joined by two labelled arrows, left to right: the later fund puts
   money in, the company's new price lifts the earlier fund's paper value. The
   company, where the price is set, is the node in the one colour. Restacks to a
   column on a phone, with the arrows turning to point down. */
.af-fig .gfa-cx{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr) 120px minmax(0,1fr);
  align-items:stretch;gap:0}
.af-fig .gfa-nd{border:1px solid var(--border-2);background:var(--card);padding:14px 14px 16px}
.af-fig .gfa-nd .t{display:block;font-family:var(--font-mono);font-size:10.5px;line-height:15px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.af-fig .gfa-nd b{display:block;font-size:15px;line-height:20px;font-weight:600;color:var(--text);margin-bottom:6px}
.af-fig .gfa-nd p{font-size:13px!important;line-height:18px!important;color:var(--muted);margin:0!important}
.af-fig .gfa-nd.on{border-color:var(--accent);box-shadow:inset 0 2px 0 var(--accent)}
.af-fig .gfa-nd.on .t{color:var(--accent)}
.af-fig .gfa-ar{display:flex;flex-direction:column;justify-content:center;padding:0 10px}
.af-fig .gfa-ar .ln{position:relative;height:1px;background:var(--muted-2);margin:8px 0}
.af-fig .gfa-ar .ln::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;
  border-top:1px solid var(--muted-2);border-right:1px solid var(--muted-2);transform:rotate(45deg)}
.af-fig .gfa-ar span{font-size:12px;line-height:16px;color:var(--muted-2);text-align:center}

.af-fig .gfa-guard{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:26px;padding-top:20px;
  border-top:1px solid var(--hairline)}
.af-fig .gfa-guard .hd{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.af-fig .gfa-guard .it{position:relative;padding:8px 0 8px 22px;font-size:14px;line-height:20px;color:var(--muted);
  border-bottom:1px solid var(--hairline)}
.af-fig .gfa-guard .it:last-child{border-bottom:none}
.af-fig .gfa-guard .it::before{content:"";position:absolute;left:2px;top:13px;width:8px;height:4px;
  border-left:1.5px solid var(--text);border-bottom:1.5px solid var(--text);transform:rotate(-45deg)}
.af-fig .gfa-guard .q .it::before{content:"?";border:0;transform:none;top:8px;left:1px;width:auto;height:auto;
  font-family:var(--font-mono);font-size:13px;line-height:20px;color:var(--faint)}

@media (max-width:700px){
  .af-fig .gfa-cx{grid-template-columns:1fr}
  .af-fig .gfa-ar{padding:6px 0 6px 18px;flex-direction:row;align-items:center;gap:12px;min-height:56px}
  .af-fig .gfa-ar .ln{width:1px;height:40px;margin:0;flex:none}
  .af-fig .gfa-ar .ln::after{right:-4px;top:auto;bottom:0;transform:rotate(135deg)}
  .af-fig .gfa-ar span{text-align:left}
  .af-fig .gfa-guard{grid-template-columns:1fr;gap:18px}
}

/* ---------- capital account waterfall (reading-fund-reports) ----------
   Each row is a float on a shared 0 to 260k scale: where the running balance
   starts and ends. Positions are set inline as left and width percentages.
   Distributions, the cash that DPI counts, are the one colour. */
.af-fig .gfa-wf{display:grid;gap:0}
.af-fig .gfa-wr{display:grid;grid-template-columns:220px minmax(0,1fr) 92px;gap:14px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--hairline)}
.af-fig .gfa-wr .l{font-size:14px;line-height:19px;color:var(--text)}
.af-fig .gfa-wr .l small{display:block;font-family:var(--font-mono);font-size:11px;line-height:15px;color:var(--muted-2)}
.af-fig .gfa-wr .t{position:relative;height:22px}
.af-fig .gfa-wr .t::before{content:"";position:absolute;inset:0;background:var(--surface);opacity:.6}
.af-fig .gfa-wr .t b{position:absolute;top:0;bottom:0;background:var(--to-grey-500)}
.af-fig .gfa-wr .t b.neg{background:none;border:1px solid var(--muted-2);
  background-image:repeating-linear-gradient(135deg,transparent 0 4px,var(--border-2) 4px 5px)}
.af-fig .gfa-wr .t b.pos{background:var(--to-grey-300)}
.af-fig .gfa-wr .t b.on{background:var(--accent)}
.af-fig .gfa-wr .t b.zero{width:2px!important;background:var(--muted-2)}
.af-fig .gfa-wr .v{font-family:var(--font-mono);font-size:13px;line-height:18px;color:var(--text);text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.af-fig .gfa-wr.tot{border-top:1px solid var(--border-2);border-bottom:none}
.af-fig .gfa-wr.tot .l{font-weight:600}
.af-fig .gfa-wr.tot .l small{font-weight:400}
.af-fig .gfa-wr.on .v{color:var(--accent)}
.af-fig .gfa-wsc{display:grid;grid-template-columns:220px minmax(0,1fr) 92px;gap:14px;margin-top:4px}
.af-fig .gfa-wsc .s{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;line-height:16px;color:var(--faint)}

.af-fig .gfa-ratio{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:24px;border-top:1px solid var(--border)}
.af-fig .gfa-ratio > div{padding:16px 22px 4px;border-left:1px solid var(--border)}
.af-fig .gfa-ratio > div:first-child{padding-left:0;border-left:none}
.af-fig .gfa-ratio .n{font-family:var(--font-mono);font-size:26px;line-height:32px;color:var(--text);font-variant-numeric:tabular-nums}
.af-fig .gfa-ratio .on .n{color:var(--accent)}
.af-fig .gfa-ratio .lb{font-size:14px;line-height:20px;color:var(--text);font-weight:600;margin-top:2px}
.af-fig .gfa-ratio .f{font-family:var(--font-mono);font-size:11.5px;line-height:17px;color:var(--muted-2);margin-top:4px}

@media (max-width:620px){
  .af-fig .gfa-wr{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .af-fig .gfa-wr .t{grid-column:1 / -1;grid-row:2}
  .af-fig .gfa-wsc{grid-template-columns:1fr}
  .af-fig .gfa-wsc > span{display:none}
  .af-fig .gfa-ratio{grid-template-columns:1fr}
  .af-fig .gfa-ratio > div{padding:14px 0 4px;border-left:none}
  .af-fig .gfa-ratio > div + div{border-top:1px solid var(--hairline)}
}

/* ---------- offset window (after-your-client-commits) ----------
   Sixteen months, July 2026 to October 2027, as a ruler. Two spans: the
   payments that count (the income year, in the one colour) and the investments
   that count (the same year plus two months, grey, with the two extra months
   hatched). Two markers after it for the paperwork. */
.af-fig .gfa-ow{display:grid;gap:0}
.af-fig .gfa-or{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;
  border-bottom:1px solid var(--hairline)}
.af-fig .gfa-or .l{font-size:14px;line-height:19px;color:var(--text);font-weight:600}
.af-fig .gfa-or .l small{display:block;font-family:var(--font-mono);font-size:11px;line-height:15px;font-weight:400;color:var(--muted-2)}
.af-fig .gfa-mt{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));height:22px;background:var(--surface)}
.af-fig .gfa-mt .a{grid-row:1;background:var(--accent)}
.af-fig .gfa-mt .g{grid-row:1;background:var(--to-grey-500)}
.af-fig .gfa-mt .h{grid-row:1;border:1px solid var(--to-grey-500);
  background:repeating-linear-gradient(135deg,transparent 0 4px,var(--to-grey-500) 4px 5px)}
.af-fig .gfa-mt .m{grid-row:1;position:relative}
.af-fig .gfa-mt .m::before{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--text)}
.af-fig .gfa-mx{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;margin-top:6px}
.af-fig .gfa-mx .tk{display:grid;grid-template-columns:repeat(16,minmax(0,1fr))}
.af-fig .gfa-mx .tk span{grid-row:1;font-family:var(--font-mono);font-size:10.5px;line-height:15px;color:var(--faint);text-align:center;
  white-space:nowrap}
.af-fig .gfa-mx .tk span.yr{grid-row:2;text-align:left;color:var(--muted-2);border-left:1px solid var(--border-2);padding-left:4px}
.af-fig .gfa-mx .tk span.on{color:var(--text)}
.af-fig .gfa-calc{margin-top:24px;padding:16px 18px;border:1px solid var(--border-2);background:var(--card)}
.af-fig .gfa-calc .hd{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.af-fig .gfa-calc .eq{font-size:16px;line-height:24px;color:var(--text);font-weight:600}
.af-fig .gfa-calc .eq i{font-style:normal;padding:0 4px;background:var(--accent-bg)}
.af-fig .gfa-calc p{font-size:14px!important;line-height:21px!important;color:var(--muted);margin:8px 0 0!important}

@media (max-width:620px){
  .af-fig .gfa-or,.af-fig .gfa-mx{grid-template-columns:1fr;gap:6px}
  .af-fig .gfa-mx > span{display:none}
}

/* Pacing planner (#paceCalc): a live summary line, then two side-by-side
   comparisons. The staggered figure leads; the one-fund figure sits beside it,
   smaller and grey, so the comparison is made for the reader. */
.af-fig .hma-sum{margin:22px 0 0!important;font-size:16px!important;line-height:24px!important;color:var(--text);max-width:62ch}
.af-fig .hma-cmp{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:20px;border-top:1px solid var(--hairline)}
.af-fig .hma-t{padding:18px 24px 0;border-left:1px solid var(--border)}
.af-fig .hma-t:first-child{padding-left:0;border-left:none}
.af-fig .hma-t .lbl{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.af-fig .hma-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-top:10px}
.af-fig .hma-v > span{display:flex;flex-direction:column}
.af-fig .hma-v b{font-family:var(--font-mono);font-weight:400;font-variant-numeric:tabular-nums}
.af-fig .hma-v small{font-size:12px;line-height:16px;color:var(--muted-2);margin-top:2px}
.af-fig .hma-a b{font-size:30px;line-height:34px;color:var(--accent)}
.af-fig .hma-b b{font-size:18px;line-height:22px;color:var(--muted)}
html[data-theme="light"] .af-fig .hma-a b{color:var(--to-ink)}
@media (max-width:620px){
  .af-fig .hma-cmp{grid-template-columns:1fr}
  .af-fig .hma-t{padding:16px 0 0;border-left:none}
  .af-fig .hma-t + .hma-t{margin-top:16px;border-top:1px solid var(--hairline)}
  .af-fig .hma-a b{font-size:26px;line-height:30px}
}