# User Manual Style Guide

The house conventions for every volume, extracted from the two exemplars
([`docs/user-manual/USER-MANUAL.html`](USER-MANUAL.html), the IPP volume)
and binding for all new writing. The figure catalog is in [§12](#12-figure-catalog);
a rendered sample of every family is in `figure-gallery.html`
(build-only — `./build.sh --volume figure-gallery`).

## 1. Voice

- **Second person, plain speech.** "You create a pool", never "the user may
  create a pool". Short paragraphs — three to five sentences.
- **Problem first.** Every chapter that introduces a capability opens with
  the reader's problem ("The trader's problem", "The IPP's problem") before
  any screen or mechanism.
- **Confidence without hedging.** Describe what the system does. If a screen
  is a placeholder or a feature is partial, say exactly that — honesty is a
  feature (see EVOLUTION §6).
- **Explain, then name.** Introduce a concept in plain words, then attach the
  platform's term for it in bold, then use the term consistently.

## 2. Chapter anatomy

- Chapters are `## N. Title — em-dash subtitle` (rendered h2); sections are
  `### N.M Title` (h3). The volume title is pandoc metadata, not a heading.
- One chapter = one file: `src/vN-<volume>/NN-slug.md` (see §9).
- A module chapter runs: problem → what the module does → concepts to have in
  hand → the screens, in reading order → worked example → bridges.
- Standard closing chapters per volume, in this order where applicable:
  *The rhythms*, *Common questions*, *Terms used in this volume*,
  *Reference card* or *Demo walkthrough*.
- Numbers in prose use thin, readable formatting: `16,142 kWh`, `R 6,088`,
  `65.0c`, `06:00` (SAST). Units always stated.

## 3. Callouts

Blockquotes are the only callout mechanism (they render as the green panel):

- **Tip / caveat:** `> **Note.** …` / `> **Careful.** …`
- **Follow along** (§5): `> **Follow along.** …`
- **Bridge** — when another volume owns the mechanics:
  `> **Where this is taught.** Settlement applies this term in [V8 §7](v8-settlement.html#7-pricing--adjustments).`

One home per topic: a mechanism is *taught* in exactly one section; every
other mention is a one-sentence summary plus a bridge. Never re-teach.

## 4. Worked-example anatomy

Every substantial mechanism gets a worked example with real numbers, shaped
exactly like the exemplars:

1. **Provenance stamp** (§5) — where the data comes from.
2. **Inputs table** — the starting facts, one row per actor/parameter.
3. **The arithmetic, stepped** — prose walks the computation; every derived
   number shows its formula inline: `R1: 60 × 50/100 = 30`.
4. **Conservation check** — wherever energy or money splits, prove it:
   `Σ = 75 + 60 = 135 = G ✓`. Ledgers prove `Σ = 0`.
5. **The roll-up** — the table the reader will see on screen, then one
   sentence: "this is the pattern to expect on your own page."

## 5. Follow-along and provenance stamps

Worked examples and screen walkthroughs bind to the deterministic demo
dataset (`mix wb.setup --profile full_demo`, seed 42). Two templates:

```
> **Follow along.** Seat: <demo user> (<app>). Path: <menu → screen → action>.
> You should see: <one sentence>.
```

```
> **Data.** full_demo · seed 42 · stage S09 (settlement matrix) ·
> last re-derived 2026-07-18 against manifest checksum <…>.
```

The stamp's stage names which setup stage seeded the numbers; re-derivation
duties are defined in [EVOLUTION §4](EVOLUTION.md).

## 6. Glossary linking

- First use of a term of art in each chapter links to the master glossary:
  `[allocation run](index.html#glossary)` (anchor per term once GLOSSARY.md
  lands at M1).
- Never define a term inline without a glossary entry; never fork a second
  definition. New terms ship in the same PR as the chapter introducing them.

## 7. Icons and badges

The manual names icons and badges exactly as the app renders them. The
mapping is owned in code by `WB.WheelingWeb.StrategyComponents`. When
describing a badge, give its icon name and meaning once, then use the meaning.

## 8. Frozen anchors registry

These anchors are load-bearing across volumes — never rename or renumber:

| Anchor | What | Frozen at |
| --- | --- | --- |
| `v0-orientation.html#spine-setup` · `#spine-strategy` · `#spine-deal` · `#spine-nominate` · `#spine-market` · `#spine-settle` · `#spine-statement` | The seven lifecycle-spine stops (V0 §4). Volume locator strips link here. | M1 |
| `v0-orientation.html#N-…` chapter ids for §§1–8 | V0 chapter anchors — the glossary's "Explained in →" links target them | M1 |
| `index.html#glossary` and every `index.html#g-<slug>` | The master glossary and its term anchors | M1 |
| **The thread cast** (frozen entity names): direct line — *IPP2 Atlantis Wind* (IPP 2, meter `MTR-NERSA-GEN-1002`) → *OffTaker C Midrand DC* (OffTaker C, meter `MTR-OTS-thin_offtaker_c_private`); chain line — *IPP3 Midrand Hybrid* (IPP 3, `MTR-NERSA-GEN-1003`) → *T1 Renewables Pool* (Trader 1) → *OffTaker A Rosebank Mall* (OffTaker A), with the *T1 → T2 Flex Pool* trader-trader leg | All worked examples use these entities; dataset anchor: full_demo · seed 42 · sealed 2026-07-15 | M2 |
| `v8-settlement.html#1-what-settlement-does` · `#2-the-five-stage-pipeline` · `#7-pricing-and-adjustments` · `#8-the-ledger--sum-to-zero` · `#11-statuses-and-re-settlement` · `#12-the-settlement-ui` · `#13-worked-month--physical` · `#14-worked-month--virtual-cfd` (legacy `v6-settlement.html#…` preserves the hash) | V8 load-bearing chapter anchors (V0/V1/V2 bridges target these) | M4 |
| `v3-strategy.html#15-market-operations--bridge-to-v7` | V4 BRP bridge (legacy `#15…`–`#18…` deep links land here until M6) | M5 |
| `v3-strategy.html` / `v4-ipp.html` chapter ids from retrofit | Prefer stable heading-derived ids; re-run `scripts/retrofit_legacy_manuals.py` only with a diff audit | M5 |

## 9. Files and build

- Layout: `src/index.md` (hub) · `src/vN-<name>/NN-slug.md` (chapters,
  built in numeric order into `vN-<name>.html`) · `src/vN-<name>/_meta.yml`
  (volume `title:` / `subtitle:`) · `src/vN-<name>/99-*.md` (standalone
  extras like the figure gallery — built, never linked from the hub).
- Build: `./build.sh` (all) or `./build.sh --volume v8-settlement`. The
  build post-processes pandoc output into the exemplar shell and then checks
  links, anchors and assets; it must pass before commit.
- **Never edit the built `.html`** — it carries a GENERATED banner and is
  overwritten by the next build. Commit source and artifact together.
- Raw-HTML figures: keep **no blank lines inside** a `<figure>` block, or
  pandoc will interleave paragraphs into it.
- Published chapter numbers are never reused; content appends
  (EVOLUTION §7).
- **Open TODOs** live in **V22 · TODOs** (`src/v22-todos/`). File each item
  under the **owning product volume’s** chapter (V0–V21 only — never a V22
  bucket). Every item must cite volume + chapter and carry a **priority
  grade**: Urgent (red), Intermediate (yellow), or Nice to Have (blue —
  **default**). Use `directory-stat--todo-*` + `[…]{.band .todo-*}` chips;
  fields and template in [V22 §1](v22-todos.html#1-how-to-file-a-todo).

## 10. Tables and lists

Tables are for enumerable facts only — states, fields, keyboard-able
reference rows. Explanations live in prose around the table, not in cells.
Lists take `-` bullets; numbered lists only for genuinely ordered steps.

## 11. Figures — general rules

- Figures use the catalog families below — extend the catalog (CSS +
  gallery + this file, same PR) rather than inventing one-off markup.
- Every figure is a `<figure>` with a `<figcaption>` that states what it
  shows *and the data it was drawn from* when illustrative.
- Figures must survive 680 px wide and print (`figure-gallery.html` is the
  regression reference — check it after any `manual.css` change).
- Prefer figures over screenshots; a screenshot must come from the seeded
  dataset with seat + path recorded in its caption (EVOLUTION §8).
- Palette: use the tokens documented at the top of `manual.css`; never
  introduce new hex values without adding them there.

## 12. Figure catalog

Twelve families. Copy the snippet, replace the data. Families marked
*(legacy)* are defined in `USER-MANUAL.css`; the rest in `manual.css`.

### 12.1 `allocation-diagram` *(legacy)* — supply→demand splits, segmented bars

Use for: how a quantity of supply divides across demands in one interval.

```html
<figure class="allocation-diagram">
<figcaption>One-hour allocation flow (MWh)</figcaption>
<section class="allocation-diagram__stage">
<div class="allocation-diagram__stage-label"><span>Stage 1</span><strong>Serve demand in merit order</strong></div>
<div class="allocation-diagram__stack">
<div class="allocation-diagram__card allocation-diagram__card--solar"><small>Solar A · 65c</small><strong>6 MWh</strong></div>
<div class="allocation-diagram__card allocation-diagram__card--wind"><small>Wind · 70c</small><strong>5 MWh</strong></div>
</div>
<div class="allocation-diagram__down-arrow">↓ merit-order allocation</div>
<div class="allocation-diagram__demands">
<div class="allocation-diagram__demand">
<div class="allocation-diagram__demand-head"><strong>1 · Industrial</strong><span>8 / 8 MWh</span></div>
<div class="allocation-diagram__bar">
<span class="allocation-diagram__segment allocation-diagram__segment--solar-a" style="--share: 75%">6 Solar</span>
<span class="allocation-diagram__segment allocation-diagram__segment--wind" style="--share: 25%">2 Wind</span>
</div>
</div>
</div>
</section>
<div class="allocation-diagram__legend"><span><i class="allocation-diagram__key allocation-diagram__key--solar"></i>Solar</span><span><i class="allocation-diagram__key allocation-diagram__key--wind"></i>Wind</span></div>
</figure>
```

### 12.2 `priority-prorata-diagram` *(legacy)* — tiers before an equal-tier split

Use for: priority ordering with a pro-rata split inside one tier.

```html
<figure class="priority-prorata-diagram">
<figcaption>Priority first; pro-rata only within an equal tier</figcaption>
<div class="priority-prorata-diagram__demand"><span>Demand to serve</span><strong>10.00 MW</strong></div>
<div class="priority-prorata-diagram__tiers">
<section class="priority-prorata-diagram__tier priority-prorata-diagram__tier--first">
<div class="priority-prorata-diagram__priority">Priority 10</div>
<div class="priority-prorata-diagram__member"><span>Solar PPA A</span><strong>3.00 MW</strong><small>served to cap</small></div>
<div class="priority-prorata-diagram__remainder"><strong>7.00 MW</strong> remains</div>
</section>
<div class="priority-prorata-diagram__arrow">↓</div>
<section class="priority-prorata-diagram__tier priority-prorata-diagram__tier--shared">
<div class="priority-prorata-diagram__priority">Priority 20 <span>equal tier</span></div>
<div class="priority-prorata-diagram__split">
<div class="priority-prorata-diagram__member priority-prorata-diagram__member--one"><span>PPA B · weight 1</span><strong>1.75 MW</strong></div>
<div class="priority-prorata-diagram__member priority-prorata-diagram__member--three"><span>PPA C · weight 3</span><strong>5.25 MW</strong></div>
</div>
<div class="priority-prorata-diagram__formula">7.00 MW × <strong>1 : 3</strong> → 1.75 : 5.25</div>
</section>
</div>
</figure>
```

### 12.3 `rule-example-diagram` *(legacy)* — time-lane scenario flows

Use for: several timestamped scenarios, each a left-to-right decision flow.

```html
<figure class="rule-example-diagram">
<figcaption>Two hourly decisions produced by the rule set</figcaption>
<section class="rule-example-diagram__scenario">
<div class="rule-example-diagram__time"><strong>12:00</strong><span>standard</span></div>
<div class="rule-example-diagram__flow">
<div class="rule-example-diagram__node rule-example-diagram__node--supply"><small>Solar available</small><strong>10 MWh</strong></div>
<div class="rule-example-diagram__connector"><span>MW_CAP 8</span><b>→</b></div>
<div class="rule-example-diagram__node rule-example-diagram__node--demand"><small>Industrial</small><strong>8 MWh</strong></div>
<div class="rule-example-diagram__connector"><b>+</b></div>
<div class="rule-example-diagram__node rule-example-diagram__node--blocked"><small>Excess</small><strong>2 MWh spills</strong></div>
</div>
</section>
</figure>
```

### 12.4 `pricing-flow` *(legacy)* — flow plus a money-ledger strip

Use for: one line's quantities and prices from source to destination, with
the money proven underneath.

```html
<figure class="pricing-flow">
<figcaption>Allocation flow and price — 12:00 solar → factory</figcaption>
<div class="pricing-flow__lane">
<div class="pricing-flow__time"><strong>12:00</strong><span>standard</span></div>
<div class="pricing-flow__path">
<div class="pricing-flow__node pricing-flow__node--supply"><small>Solar PPA</small><strong>16,710 kWh sent</strong><span>buy 65 c/kWh</span></div>
<div class="pricing-flow__arrow"><span>DLF 0.966</span><b>→</b><small>568 kWh lost</small></div>
<div class="pricing-flow__node pricing-flow__node--demand"><small>Factory</small><strong>16,142 kWh delivered</strong><span>sell 120 · wheel 15 c/kWh</span></div>
</div>
</div>
<div class="pricing-flow__ledger">
<div class="pricing-flow__metric"><small>Revenue</small><strong>R 19,370.23</strong><span>16,142 × 120 ÷ 100</span></div>
<div class="pricing-flow__metric"><small>Energy cost</small><strong>− R 10,861.50</strong><span>16,710 × 65 ÷ 100</span></div>
<div class="pricing-flow__metric pricing-flow__metric--positive"><small>Line margin</small><strong>R 6,087.45</strong><span>37.7 c/kWh delivered</span></div>
</div>
</figure>
```

### 12.5 `run-chart-example` *(legacy)* — inline-SVG mini charts

Use for: small hand-drawn chart shapes (stacks, demand lines, SoC, spill)
and the meter-series ladder (readings step → interval bars → daily TOU
stacks → monthly bars — see V0 §3.1). Wrap 2–4 in a `run-chart-examples`
grid with a shared legend. Meter-series extras: `__step`, `__bar`,
`__bar--peak|standard|offpeak|month`, `__bar--hi`, legend keys
`--register|--peak|--standard|--offpeak|--month|--high-season|--complete|--gap`.
Explorer sketches (V2 §7.2): `__season-band`, `__heat--full|partial|gap`,
`__axis-hi`.

```html
<figure class="run-chart-examples">
<figcaption>How the chart reads the scenario</figcaption>
<div class="run-chart-examples__legend"><span><i class="run-chart-examples__key run-chart-examples__key--solar"></i>Solar</span><span><i class="run-chart-examples__key run-chart-examples__key--demand"></i>Demand line</span></div>
<div class="run-chart-examples__grid">
<section class="run-chart-example">
<h4>1. Midday solar</h4>
<svg viewBox="0 0 300 150" role="img">
<g class="run-chart-example__gridlines"><path d="M34 22H282M34 61H282M34 100H282M34 122H282" /></g>
<path class="run-chart-example__area run-chart-example__area--solar" d="M34 122 L104 96 L174 38 L244 96 L282 118 L282 122 Z" />
<path class="run-chart-example__line" d="M34 122 L104 90 L174 38 L244 90 L282 118" />
<circle class="run-chart-example__point" cx="174" cy="38" r="4" />
<text x="174" y="17" text-anchor="middle">12:00 · peak</text>
<text x="34" y="141">08h</text><text x="282" y="141" text-anchor="end">16h</text>
</svg>
<p><strong>Read it:</strong> the solar band meets the demand line at noon.</p>
</section>
</div>
</figure>
```

### 12.6 `tab-sample` *(legacy)* — annotated screen replica with callouts

Use for: a table/tile view as the screen shows it, red-numbered markers
matched to callouts beneath. Wrap several in `<div class="tab-samples">`.

```html
<div class="tab-samples">
<section class="tab-sample">
<h4>Allocations <span>sample view</span></h4>
<div class="tab-sample__screen">
<table>
<thead><tr><th>Hour <b>1</b></th><th>Sent <b>2</b></th><th>Delivered <b>3</b></th></tr></thead>
<tbody><tr><td>12 SAST</td><td>16,710 kWh</td><td>16,142 kWh</td></tr></tbody>
</table>
</div>
<ol class="tab-sample__callouts">
<li><b>1</b><strong>Hour</strong> is the SAST settlement interval.</li>
<li><b>2</b><strong>Sent</strong> is injected energy; buy cost is charged on it.</li>
<li><b>3</b><strong>Delivered</strong> is energy after losses.</li>
</ol>
</section>
</div>
```

### 12.7 `entity-map` — object-model cards and relationships

Use for: what objects exist and how they relate (V0 §3, chapter openers).
Card tints: `--org` purple · `--site` gold · `--meter` blue · `--deal`
green · `--money` soft gold · `--market` red.

```html
<figure class="entity-map">
<figcaption>From site to statement — the objects on the way</figcaption>
<div class="entity-map__lane">
<div class="entity-map__card entity-map__card--org"><strong>Organization</strong><small>your company</small></div>
<div class="entity-map__rel"><b>→</b><span>owns <span class="entity-map__badge">1‑n</span></span></div>
<div class="entity-map__card entity-map__card--site"><strong>Generator site</strong><small>an IPP plant</small></div>
<div class="entity-map__rel"><b>→</b><span>metered by</span></div>
<div class="entity-map__card entity-map__card--meter"><strong>Meter</strong><small>20-min readings</small></div>
</div>
<div class="entity-map__group">
<span class="entity-map__group-label">Deal objects</span>
<div class="entity-map__grid">
<div class="entity-map__card entity-map__card--deal"><strong>Proposal</strong><small>terms before contract</small></div>
<div class="entity-map__card entity-map__card--deal"><strong>Physical PPA</strong><small>wheeled energy deal</small></div>
<div class="entity-map__card entity-map__card--money"><strong>Settlement period</strong><small>one month, one contract</small></div>
</div>
</div>
</figure>
```

### 12.8 `lifecycle-rail` — state machines

Use for: any status lifecycle (proposal, PPA, settlement, nomination,
dispute). Pills: `--initial` dashed · `--active` ink · `--happy` gold ·
`--terminal` grey · `--danger` red.

```html
<figure class="lifecycle-rail">
<figcaption>Proposal states</figcaption>
<div class="lifecycle-rail__track">
<span class="lifecycle-rail__state lifecycle-rail__state--initial">PENDING</span>
<div class="lifecycle-rail__arrow"><b>→</b><span>accept</span></div>
<span class="lifecycle-rail__state lifecycle-rail__state--happy">ACCEPTED</span>
<div class="lifecycle-rail__arrow"><b>→</b><span>creates draft PPA</span></div>
<span class="lifecycle-rail__state lifecycle-rail__state--active">NEGOTIATING</span>
</div>
<div class="lifecycle-rail__branches">
<span class="lifecycle-rail__branch-label">Also from PENDING:</span>
<span class="lifecycle-rail__state lifecycle-rail__state--danger">DECLINED</span>
<span class="lifecycle-rail__state lifecycle-rail__state--terminal">EXPIRED</span>
<span class="lifecycle-rail__state lifecycle-rail__state--terminal">WITHDRAWN</span>
</div>
<p class="lifecycle-rail__note">An expired proposal can be renewed up to its renewal limit — it returns to PENDING.</p>
</figure>
```

### 12.9 `pipeline-spine` — staged pipelines and the locator strip

Use for: the settlement pipeline, the setup stage graph, and — as the
`--locator` variant with `is-here` — the "you are here" strip at the top of
every volume (anchors frozen at M1, §8).

```html
<figure class="pipeline-spine">
<figcaption>Settlement — five stages, writes only at the end</figcaption>
<div class="pipeline-spine__stages">
<div class="pipeline-spine__stage"><b>1</b><strong>Resolve</strong><small>meters → interval series</small></div>
<div class="pipeline-spine__arrow">→</div>
<div class="pipeline-spine__stage is-here"><b>2</b><strong>Match</strong><small>min(supply, demand) + losses</small></div>
<div class="pipeline-spine__arrow">→</div>
<div class="pipeline-spine__stage"><b>3</b><strong>Price</strong><small>tariff, TOU, escalation</small></div>
<div class="pipeline-spine__arrow">→</div>
<div class="pipeline-spine__stage"><b>4</b><strong>Adjust</strong><small>spill, shortfall, banking</small></div>
<div class="pipeline-spine__arrow">→</div>
<div class="pipeline-spine__stage"><b>5</b><strong>Ledger</strong><small>double entry, Σ = 0</small></div>
</div>
</figure>
```

### 12.10 `ledger-table` — double entry with the Σ = 0 proof

Use for: line-item ledgers. Numeric cells take `ledger-table__num`, signed
values `__debit`/`__credit`; the proof row lives in `<tfoot>`.

```html
<figure class="ledger-table">
<figcaption>June line items — one PPA, one buyer</figcaption>
<div class="ledger-table__screen">
<table>
<thead><tr><th>Party</th><th>Line</th><th class="ledger-table__num">kWh</th><th class="ledger-table__num">Amount</th></tr></thead>
<tbody>
<tr><td>Off-taker</td><td>Wheeled energy</td><td class="ledger-table__num">16,142</td><td class="ledger-table__num ledger-table__debit">− R 19,370.23</td></tr>
<tr><td>IPP</td><td>Energy sold</td><td class="ledger-table__num">16,710</td><td class="ledger-table__num ledger-table__credit">R 10,861.50</td></tr>
<tr><td>Trader</td><td>Margin</td><td class="ledger-table__num">—</td><td class="ledger-table__num ledger-table__credit">R 6,087.45</td></tr>
<tr><td>Eskom</td><td>Wheeling charge</td><td class="ledger-table__num">16,142</td><td class="ledger-table__num ledger-table__credit">R 2,421.28</td></tr>
</tbody>
<tfoot><tr><td colspan="3">Σ across all parties (must be zero)</td><td class="ledger-table__num">R 0.00 ✓</td></tr></tfoot>
</table>
</div>
<p class="ledger-table__note">Every rand a party pays appears as a rand another party receives — the ledger nets to zero by construction.</p>
</figure>
```

### 12.11 `clock-dial` — the system's rhythms

Use for: what runs when (V0 §6 preview, V1 rhythms, V6 gate times, V19 §3 catalog). Dial for the
24-hour day; strip for day-of-month jobs. Dot/mark tints: `--settlement`
gold · `--strategy` purple · `--market` blue · `--forecast` teal ·
`--lifecycle` red. For Eskom TOU calendars (V2 §8.2) reuse
`clock-dial__strip--hours` with `clock-dial__hour--peak|standard|offpeak`.

```html
<figure class="clock-dial">
<figcaption>The 24-hour clock (SAST)</figcaption>
<div class="clock-dial__layout">
<div class="clock-dial__face">
<svg viewBox="0 0 220 220" role="img">
<circle class="clock-dial__ring" cx="110" cy="110" r="88" />
<line class="clock-dial__tick" x1="110" y1="22" x2="110" y2="32" /><line class="clock-dial__tick" x1="198" y1="110" x2="188" y2="110" /><line class="clock-dial__tick" x1="110" y1="198" x2="110" y2="188" /><line class="clock-dial__tick" x1="22" y1="110" x2="32" y2="110" />
<text x="110" y="16" text-anchor="middle">00</text><text x="207" y="113" text-anchor="start">06</text><text x="110" y="212" text-anchor="middle">12</text><text x="13" y="113" text-anchor="end">18</text>
<circle class="clock-dial__mark clock-dial__mark--settlement" cx="132.8" cy="25.1" r="6" />
<circle class="clock-dial__mark clock-dial__mark--market" cx="172.2" cy="47.8" r="6" />
<circle class="clock-dial__mark clock-dial__mark--strategy" cx="163.4" cy="38.4" r="6" />
</svg>
</div>
<ul class="clock-dial__jobs">
<li><span class="clock-dial__dot clock-dial__dot--settlement"></span><b>01:00</b> Daily settlement runner</li>
<li><span class="clock-dial__dot clock-dial__dot--strategy"></span><b>02:30</b> Nightly strategy re-forecast</li>
<li><span class="clock-dial__dot clock-dial__dot--market"></span><b>03:00</b> Day-ahead bids built and submitted</li>
</ul>
</div>
</figure>
```

### 12.12 `topology-map` — wheeling paths across the network

Use for: who connects where, and what a path costs in losses/charges
(V1 voltage tiers, V3 topology). Node tints: `--gen` gold · `--load` green
· `--trader` purple · `--grid` red · `--munix` blue · `--meter` dashed.

```html
<figure class="topology-map">
<figcaption>IPP → off-taker across two networks</figcaption>
<div class="topology-map__tier">
<div class="topology-map__tier-label"><strong>Transmission</strong><span>≥ 132 kV</span></div>
<div class="topology-map__nodes">
<div class="topology-map__node topology-map__node--gen"><strong>IPP · Solar 75 MW</strong><small>injects at 132 kV</small></div>
<div class="topology-map__flow"><b>→</b><span>TLF zone North</span></div>
<div class="topology-map__node topology-map__node--grid"><strong>Eskom Tx</strong><small>use-of-system charged</small></div>
</div>
</div>
<div class="topology-map__drop"><b>↓</b>DLF 0.966</div>
<div class="topology-map__tier">
<div class="topology-map__tier-label"><strong>Distribution</strong><span>11–33 kV</span></div>
<div class="topology-map__nodes">
<div class="topology-map__node topology-map__node--munix"><strong>Municipality</strong><small>wheeling-enabled</small></div>
<div class="topology-map__flow"><b>→</b><span>delivered</span></div>
<div class="topology-map__node topology-map__node--load"><strong>Factory</strong><small>NMD 5 MVA</small></div>
</div>
</div>
</figure>
```