/* Charts from [avenues_compare_chart] and [avenues_bar_compare] (inc/content-blocks.php).
   Loaded on every page: block pages and the plugin's treatment-page sections both draw them. */

/* [avenues_compare_chart]: Avenues as a Sun line (dark-edged so it holds on white), other
   centres in deep green, every value labelled in text colours. */
.av-chart{margin:var(--space-5) 0 0;background:#FFFFFF;border:1px solid var(--grey-100,#ECEEF0);border-radius:var(--radius-lg,16px);padding:var(--space-4) var(--space-4) var(--space-2)}
.av-chart svg{display:block;width:100%;height:auto;overflow:visible}
.av-chart-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0 0 var(--space-2);font-size:var(--fs-sm);color:var(--grey-700,#43474D);font-weight:600}
.av-chart-title{flex-basis:100%;font-family:var(--font-display);font-size:1rem;color:var(--grey-900,#1C1E21)}
.av-chart-key{display:inline-flex;align-items:center;gap:8px}
.av-chart-key::before{content:"";width:22px;height:5px;border-radius:3px}
.av-chart-key.is-ours::before{background:var(--brand-sun,#FCD841);box-shadow:0 0 0 1px var(--grey-900,#1C1E21)}
.av-chart-key.is-theirs::before{background:var(--green-600,#3D5641)}
.av-chart .grid{stroke:var(--grey-100,#ECEEF0);stroke-width:1}
.av-chart .axis{fill:var(--grey-600,#555A61);font-size:12px}
.av-chart .val.ours{paint-order:stroke;stroke:#FFFFFF;stroke-width:4px}
.av-chart .cat{fill:var(--grey-900,#1C1E21);font-size:14px;font-weight:600}
.av-chart .line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.av-chart .line.theirs{stroke:var(--green-600,#3D5641);stroke-width:3}
.av-chart .line.ours-edge{stroke:var(--grey-900,#1C1E21);stroke-width:7}
.av-chart .line.ours{stroke:var(--brand-sun,#FCD841);stroke-width:5}
.av-chart .pt.theirs{fill:var(--green-600,#3D5641);stroke:#FFFFFF;stroke-width:2}
.av-chart .pt.ours{fill:var(--brand-sun,#FCD841);stroke:var(--grey-900,#1C1E21);stroke-width:2}
.av-chart .val{font-size:16px;font-weight:700;fill:var(--grey-900,#1C1E21)}
.av-chart .val.theirs{font-weight:600;fill:var(--grey-700,#43474D)}
/* [avenues_bar_compare]: the first measure in Sun (dark-edged), the second in deep green.
   Label beside the bars on wide screens, above them on phones. */
.av-bars{container-type:inline-size}
.av-bars-rows{display:grid;gap:var(--space-4);margin-top:var(--space-3)}
.av-bars-row{display:grid;gap:6px;align-items:center}
/* Side labels only when the chart itself is wide (a half-width column stacks them). */
@container (min-width:640px){.av-bars-row{grid-template-columns:220px 1fr;gap:var(--space-4)}.av-bars-label{text-align:right}}
.av-bars-label{font-weight:600;color:var(--grey-900,#1C1E21);font-size:var(--fs-sm);line-height:1.3}
.av-bars-pair{display:grid;gap:4px}
.av-bar-line{display:flex;align-items:center;gap:8px}
.av-bar{display:block;height:16px;border-radius:4px;flex:0 0 calc((100% - 56px) * var(--f));min-width:2px}
.av-bar.is-ours{background:var(--brand-sun,#FCD841);box-shadow:inset 0 0 0 1px var(--grey-900,#1C1E21)}
.av-bar.is-theirs{background:var(--green-600,#3D5641)}
.av-bar-val{font-weight:700;font-size:var(--fs-sm);color:var(--grey-900,#1C1E21);white-space:nowrap}
.av-bar.is-theirs + .av-bar-val{font-weight:600;color:var(--grey-700,#43474D)}