/* Cleared to Paid report: chart pieces the site stylesheet does not cover.
   Colours come only from site.css tokens; --accent-mark marks what is paid. */
.r-chart { min-width: 0; display: grid; gap: 10px; }
section[id] > .prose:first-child > h2 { margin-bottom: 12px; }  /* room between a section heading and the tiles under it */
.r-chart svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.r-chart svg text { fill: var(--ink-3); font-size: 12px; }
.r-chart svg .r-grid { stroke: var(--rule); stroke-width: 1; }
.r-chart svg .r-axis { stroke: var(--ink-3); stroke-width: 1; }
.r-chart svg [tabindex] { cursor: pointer; }
.r-chart svg [tabindex]:focus { outline: none; }
.r-chart svg [tabindex]:focus-visible rect { stroke: var(--focus); stroke-width: 2px; }
.r-tm-lab, .r-tm-val { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.r-chart svg .r-tm-lab { fill: var(--ink); font-weight: 600; }
.r-chart svg .r-tm-val { fill: var(--ink-2); }
.r-paid { fill: var(--accent-mark); }
.r-soft { fill: var(--accent-soft); stroke: var(--accent-mark); stroke-width: 1px; }

/* Payment grid: country chips per type of AI and route */
.r-cgrid th.seg { background: var(--panel); color: var(--ink-2); font-size: 0.8rem; font-weight: 600; padding: 4px 8px; }
.r-cgrid th, .r-cgrid td { padding-right: 6px; }
.r-cgrid td:not(:first-child) { min-width: 2.4rem; }
.r-cgrid td.r-theory { outline: 2px dashed var(--ink-2); outline-offset: -3px; }
.r-chip { display: inline-block; margin: 1px 2px 1px 0; padding: 0 4px; border: 1px solid var(--rule); border-radius: 3px; font: 400 0.8rem/1.5 var(--sans); color: var(--ink-3); cursor: default; }
.r-chip.main { font-weight: 700; color: var(--ink); border-color: var(--ink-3); }
.r-chip.paid { border-color: var(--accent-mark); }
.r-toggle { display: flex; align-items: center; gap: 8px; font: 0.88rem/1.4 var(--sans); color: var(--ink-2); cursor: pointer; }
.r-toggle input { accent-color: var(--ink-2); margin: 0; }

/* Model table: one row per business model, evidence folded under it */
.r-models td, .r-models th { font-size: 0.85rem; }
.r-models th.seg { background: var(--panel); color: var(--ink-2); font-size: 0.8rem; font-weight: 600; padding: 4px 8px; }
.r-models tr.r-ev td { padding-top: 0; }
.r-models details > summary { cursor: pointer; font-size: 0.8rem; color: var(--ink-3); }
.r-models details ul { margin: 6px 0 4px; padding-left: 1.1em; display: grid; gap: 2px; color: var(--ink-2); }
.r-models details p { font-size: 0.85rem; color: var(--ink-2); margin-bottom: 6px; }

/* Money flow: who hands data to whom, and what the receiver pays */
.r-flow { margin: 0; padding-left: 1.4em; display: grid; gap: 14px; font-family: var(--sans); }
.r-flow > li { display: grid; gap: 4px; }
.r-flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.r-node { padding: 2px 8px; border: 1px solid var(--rule); border-left: 3px solid var(--ink-3); border-radius: 3px; font-weight: 600; font-size: 0.92rem; }
.r-arrow { font-size: 0.82rem; color: var(--ink-3); }
.r-pay { font-size: 0.9rem; color: var(--ink-2); }
.r-pay::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; border: 1.5px solid var(--accent-mark); vertical-align: -1px; }
.r-pay.cash::before { background: var(--accent-mark); }
.r-flow ul { margin: 0; padding-left: 1.1em; font-size: 0.85rem; color: var(--ink-3); display: grid; gap: 2px; }

/* Who buys what: markers on a log-scale track; colour = what is bought, shape = kind of figure */
.r-buy .ci-track { height: 22px; }
.r-mk { position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--paper); cursor: default; }
.r-mk.r-inline { position: relative; display: inline-block; top: auto; width: 10px; height: 10px; transform: none; margin-right: 6px; vertical-align: -1px; box-shadow: none; }
.r-mk.rev { border-radius: 50%; }
.r-mk.deal { width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(45deg); }
.r-mk.deal.r-inline { width: 8px; height: 8px; transform: rotate(45deg); }
.r-mk.ceil { border-radius: 1px; }
.r-mk.spend { clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; }
.r-mk.paid { background: var(--accent-mark); }
.r-mk.data { background: var(--bar); }
.r-mk.soft { background: var(--ink-2); }
.r-mk.shp { background: var(--ink-3); }  /* shape legend: neutral fill so every shape shows */
.r-mk.co { background: var(--paper); border: 2px solid var(--ink-2); }
.r-buy-items { list-style: none; margin: -6px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font: 0.8rem/1.4 var(--sans); color: var(--ink-2); }
.r-meas { color: var(--ink-3); }