/* Shared chart library of the /premiums/ pages (G1 framework, 2026-10-21): styles for Agni_Premium_Charts (PHP) and
   BtllcPrem.charts (premium-charts.js), which emit the same markup. DESIGN.md tokens via the hub's .bth variables, with
   fallbacks so a chart works anywhere. Single series: ink line, gold area wash. Compared series: validated categorical
   palette c1–c4 (blue, amber, violet, pink; dataviz validator light mode: lightness, chroma, CVD ≥ 17.7, normal ≥ 23
   all pass; pink below 3:1 → always labelled). Teal is reserved for "we lowered our premium" (dots + band). Sequential
   heat map: one gold hue, light → dark. No red, no dashed gridlines (dashed = the 2-year median only). */
:root {
	/* Palette (prefixed; this file loads only on the premium pages). */
	--bpc-ink: var(--bt-ink, #182B2B);
	--bpc-muted: #56645F;
	--bpc-line: var(--bt-line, #DCE5E0);
	--bpc-paper: var(--bt-paper, #F1F5F3);
	--bpc-teal: var(--bt-primary, #185C53);
	--bpc-gold: #C9A23F;
	--bpc-gold-deep: var(--bt-gold, #A87B30);
	--bpc-grid: #EEF2F0;
	--bpc-c1: #2A78D6;
	--bpc-c2: #C4861A;
	--bpc-c3: #6250D6;
	--bpc-c4: #E87BA4;
	--bpc-heat-lo: #FBF5E8;
	--bpc-heat-hi: #6E4C12;
}
.bpc { margin: 0; min-width: 0; color: var(--bpc-ink); }
.bpc *, .bpc *::before, .bpc *::after { box-sizing: border-box; }
.bpc [hidden] { display: none !important; }

/* Tones: stroke for lines, background for HTML marks, fill for areas (also in a standalone legend). */
.bpc-tone--ink { --bpc-c: var(--bpc-ink); }
.bpc-tone--gold { --bpc-c: var(--bpc-gold); }
.bpc-tone--c1 { --bpc-c: var(--bpc-c1); }
.bpc-tone--c2 { --bpc-c: var(--bpc-c2); }
.bpc-tone--c3 { --bpc-c: var(--bpc-c3); }
.bpc-tone--c4 { --bpc-c: var(--bpc-c4); }

/* ---------------------------------------------------------------- line / area */
.bpc-plot { position: relative; }
.bpc-svg { display: block; width: 100%; overflow: visible; }
.bpc-line--sm .bpc-svg { height: 80px; }
.bpc-line--md .bpc-plot { height: 190px; margin-left: 34px; }
.bpc-line--md .bpc-svg { height: 100%; }
.bpc-path { fill: none; stroke: var(--bpc-c, var(--bpc-ink)); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.bpc-line--md .bpc-path { stroke-width: 1.8; }
.bpc-area { fill: var(--bpc-c, var(--bpc-ink)); fill-opacity: .1; stroke: none; }
.bpc-area.bpc-tone--ink { fill: var(--bpc-gold-deep); fill-opacity: .12; }
.bpc-median { stroke: var(--bpc-gold-deep); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.bpc-grid { stroke: var(--bpc-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bpc-y { position: absolute; left: -34px; transform: translateY(-50%); font-size: 11.5px; color: var(--bpc-muted); font-variant-numeric: tabular-nums; }
/* "We lowered our premium": band from the cut to today + the dot (owner #63; never a raise). */
.bpc-band { fill: var(--bpc-teal); fill-opacity: .09; }
.bpc-band__edge { stroke: var(--bpc-teal); stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.bpc-mark { position: absolute; z-index: 1; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--bpc-teal); box-shadow: 0 0 0 2px #fff; pointer-events: auto; }
.bpc-mark--axis { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
.bpc-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--bpc-muted); font-variant-numeric: tabular-nums; }
.bpc-axis > span:first-child, .bpc-axis > span:last-child { white-space: nowrap; }
.bpc-axis > span:nth-child(2) { text-align: center; }
.bpc-line--md .bpc-axis { margin-left: 34px; }
.bpc-axis__legend { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.bpc-axis__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Lazily drawn card sparklines (J1): the server prints the chart's numbers as one line of text in the plot's place;
   premium-charts.js draws the SVG once the card is near the viewport. Same height either way (no layout shift). */
.bpc-line--sm .bpc-plot--lazy { display: flex; align-items: center; min-height: 80px; }
.bpc-fb { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--bpc-muted); }

/* Hover layer (premium-charts.js): crosshair, focus dots, tooltip. */
.bpc-plot.is-live { cursor: crosshair; touch-action: pan-y; }
.bpc-plot:focus-visible { outline: 2px solid var(--gold, #A87B30); outline-offset: 4px; border-radius: 4px; }
.bpc-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(24, 43, 43, .45); pointer-events: none; }
.bpc-focus { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--bpc-c, var(--bpc-ink)); box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.bpc-tip { position: absolute; z-index: 1000; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: var(--bt-ink, #182B2B); color: #fff; font: 500 12.5px/1.4 var(--bt-font-body, Satoshi, Arial, sans-serif); box-shadow: 0 6px 18px rgba(24, 43, 43, .18); pointer-events: none; }
.bpc-tip__d { display: block; margin-bottom: 3px; color: rgba(255, 255, 255, .72); font-size: 11.5px; }
.bpc-tip__r { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.bpc-tip__r b { font-weight: 700; font-variant-numeric: tabular-nums; }
.bpc-tip__k { display: inline-block; width: 12px; height: 2px; border-radius: 1px; background: var(--bpc-c, #fff); }
.bpc-tip .bpc-tone--ink { --bpc-c: #fff; }
.bpc-tip .bpc-tone--gold { --bpc-c: #E2C06A; }
.bpc-tip .bpc-tone--c1 { --bpc-c: #6DA7EC; }
.bpc-tip .bpc-tone--c2 { --bpc-c: #E7AE4E; }
.bpc-tip .bpc-tone--c3 { --bpc-c: #9085E9; }
.bpc-tip .bpc-tone--c4 { --bpc-c: #F2A5C1; }
.bpc-tip__m { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: #BFE3DA; }
.bpc-tip__m::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5FB3A3; }
/* A tooltip with a link (touch: the size curve's "Go to … card", K1) takes taps. */
.bpc-tip.is-act { pointer-events: auto; }
.bpc-tip__go { display: flex; align-items: center; min-height: 36px; margin: 2px 0 -6px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.bpc-tip__go:hover, .bpc-tip__go:focus { color: #fff; }

/* ---------------------------------------------------------------- legend */
.bpc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--bpc-ink); }
.bpc-legend__item { display: inline-flex; align-items: center; gap: 7px; line-height: 1.4; }
.bpc-legend__sub { color: var(--bpc-muted); }
.bpc-legend--marks { flex-direction: column; gap: 4px; margin-top: 8px; }
.bpc-legend--marks .bpc-legend__item { position: relative; display: block; padding-left: 22px; }
.bpc-legend--marks .bpc-legend__item > .bpc-dot, .bpc-legend--marks .bpc-legend__item > .bpc-key { position: absolute; left: 0; top: 2px; }
.bpc-legend--marks .bpc-legend__item > .bpc-dot { left: 3px; top: 5px; }
.bpc-key { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.bpc-key--line { width: 16px; height: 3px; border-radius: 2px; background: var(--bpc-c, var(--bpc-ink)); }
.bpc-key--dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bpc-c, var(--bpc-ink)); }
.bpc-key--dash { width: 16px; height: 0; border-top: 2px dashed var(--bpc-gold-deep); }
.bpc-key--area, .bpc-key--bar { width: 12px; height: 12px; border-radius: 3px; background: var(--bpc-c, var(--bpc-ink)); }
.bpc-key--area { opacity: .35; }
.bpc-key--tick { width: 2px; height: 12px; background: var(--bpc-ink); }
.bpc-key--band { position: relative; width: 16px; height: 16px; border-radius: 3px; background: rgba(24, 92, 83, .14); border-left: 1px dashed rgba(24, 92, 83, .6); }
.bpc-key--band .bpc-dot { position: absolute; left: -4.5px; top: 3.5px; }
.bpc-dot { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--bpc-teal, #185C53); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(24, 92, 83, .35); vertical-align: middle; }
.bpc-legend a { font-weight: 600; }

/* ---------------------------------------------------------------- shared rows (dots, bars, paired) */
.bpc-dots__rows, .bpc-bars__rows, .bpc-paired__rows { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bpc-dots__row, .bpc-bars__row, .bpc-paired__row { display: grid; grid-template-columns: minmax(96px, 200px) minmax(0, 1fr) minmax(56px, auto); align-items: center; gap: 4px 12px; min-height: 32px; font-size: 14px; }
.bpc-dots__label, .bpc-bars__label, .bpc-paired__label { min-width: 0; font-weight: 600; line-height: 1.3; }
.bpc-dots__label a, .bpc-bars__label a, .bpc-paired__label a, .bpc-heat a { color: var(--bpc-ink); text-decoration: underline; text-decoration-color: var(--bpc-line); text-underline-offset: 3px; }
.bpc-dots__label a:hover, .bpc-bars__label a:hover, .bpc-paired__label a:hover, .bpc-heat a:hover { color: var(--primary, #185C53); text-decoration-color: currentColor; }
.bpc-sub { display: block; font-size: 12px; font-weight: 500; color: var(--bpc-muted); }
.bpc-dots__value, .bpc-bars__value { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bpc-scale-row { min-height: 18px; margin-top: 2px; }
.bpc-scale { position: relative; height: 18px; font-size: 11.5px; color: var(--bpc-muted); font-variant-numeric: tabular-nums; }
.bpc-scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }

/* Dot plot / ladder */
.bpc-dots__track { position: relative; height: 24px; border-radius: 999px; }
.bpc-dots__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--bpc-line); }
.bpc-dots__track .bpc-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--bpc-c, var(--bpc-ink)); box-shadow: 0 0 0 2px #fff; }
.bpc-tick { position: absolute; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--bpc-ink); opacity: .55; }
.bpc [data-tip] { cursor: default; }
.bpc [data-tip]:hover, .bpc [data-tip].is-hot { filter: brightness(1.15); outline: 2px solid rgba(24, 43, 43, .25); outline-offset: 1px; }

/* Horizontal ranked bars (≤ 24 px thick, 4 px rounded data end, square at the baseline) */
.bpc-bars__track { position: relative; height: 14px; }
.bpc-bars__track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--bpc-c, var(--bpc-gold)); }
.bpc-bars__row.is-hl .bpc-bars__label { color: var(--bpc-ink); }
.bpc-bars__row.is-hl .bpc-bars__track i { box-shadow: inset 0 0 0 999px rgba(24, 43, 43, .12); }
.bpc-bars__note { grid-column: 2 / -1; font-size: 12.5px; color: var(--bpc-muted); }

/* Paired bars */
.bpc-paired .bpc-legend { margin: 0 0 10px; }
.bpc-paired__row { grid-template-columns: minmax(96px, 200px) minmax(0, 1fr); padding: 4px 0; }
.bpc-paired__bars { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bpc-paired__bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(52px, auto); align-items: center; gap: 10px; }
.bpc-paired__track { position: relative; height: 11px; }
.bpc-paired__track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--bpc-c, var(--bpc-ink)); }
.bpc-paired__value { font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bpc-paired__bar.is-empty .bpc-paired__value { color: var(--bpc-muted); font-weight: 500; }
.bpc-paired__note { grid-column: 2; font-size: 12.5px; color: var(--bpc-muted); }

/* Heat map (a real table; the colour adds the shape, the number carries the value) */
.bpc-heat__scroll { margin: 0; }
.bpc-heat__table { width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 2px; font-size: 13.5px; }
.bpc .bpc-heat__table th, .bpc .bpc-heat__table td { border: 0; background-clip: padding-box; }
.bpc .bpc-heat__table thead th { background: transparent; }
.bpc-heat__table thead th { padding: 6px 8px; font-size: 12px; font-weight: 700; color: var(--bpc-muted); text-align: center; white-space: nowrap; }
.bpc-heat__table thead th:first-child { text-align: left; }
.bpc-heat__table tbody th { padding: 6px 10px 6px 0; font-weight: 600; text-align: left; white-space: normal; min-width: 130px; }
.bpc-heat__cell { min-width: 64px; padding: 8px 6px; border-radius: 4px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--bpc-ink);
	background: var(--bpc-heat-lo); background: color-mix(in oklab, var(--bpc-heat-lo), var(--bpc-heat-hi) calc(var(--t, 0) * 100%)); }
.bpc-heat__cell.is-dark, .bpc-heat__cell.is-dark a { color: #fff; }
.bpc-heat__na { color: #9AA8A3; text-align: center; }
.bpc-heat__scale { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--bpc-muted); }
.bpc-heat__scale i { flex: 0 1 160px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--bpc-heat-lo), var(--bpc-heat-hi)); box-shadow: inset 0 0 0 1px rgba(24, 43, 43, .08); }

/* ---------------------------------------------------------------- chips + sortable tables */
.bpc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.bpc-chips__label { margin-right: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #56645F); }
.bpc-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line, #DCE5E0); border-radius: 999px; background: #fff; color: var(--ink, #182B2B); font: 600 14px/1 var(--bt-font-body, Satoshi, Arial, sans-serif); cursor: pointer; transition: background-color .16s, border-color .16s, color .16s; }
.bpc-chip:hover { border-color: var(--primary, #185C53); }
.bpc-chip[aria-pressed="true"] { border-color: var(--ink, #182B2B); background: var(--ink, #182B2B); color: #fff; }
.bpc-chip:focus-visible, .bpc-sort:focus-visible { outline: 2px solid var(--gold, #A87B30); outline-offset: 2px; }
.bpc-chip[disabled] { opacity: .45; cursor: not-allowed; }
.bpc-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; text-align: inherit; cursor: pointer; }
.bpc-sort::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .25; }
th[aria-sort="ascending"] .bpc-sort::after { opacity: 1; transform: rotate(180deg); }
th[aria-sort="descending"] .bpc-sort::after { opacity: 1; }
[data-bpc-filtered="out"] { display: none !important; }

@media (max-width: 767px) {
	.bpc-line--md .bpc-plot { height: 160px; }
	.bpc-dots__row, .bpc-bars__row { grid-template-columns: minmax(0, 1fr) minmax(52px, auto); grid-template-areas: "label value" "track track"; gap: 2px 10px; }
	.bpc-dots__label, .bpc-bars__label { grid-area: label; }
	.bpc-dots__value, .bpc-bars__value { grid-area: value; }
	.bpc-dots__track, .bpc-bars__track { grid-area: track; }
	.bpc-bars__note { grid-column: 1 / -1; }
	/* Axis ticks stay visible on phones (J1): only the scale row's empty spacer cells go; the ticks take the track
	   row (dots, bars) or the one-column paired layout (where the bar wrapper keeps the value column's width). */
	.bpc-scale-row > span:empty { display: none; }
	.bpc-scale-row > .bpc-scale { grid-area: track; }
	.bpc-scale, .bpc-axis, .bpc-y { font-size: 12px; }
	.bpc-paired__row { grid-template-columns: minmax(0, 1fr); }
	.bpc-paired__note { grid-column: 1; }
	/* Tap targets (J1, from the views' own overrides): chips 44 px high on phones. */
	.bpc-chip { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.bpc *, .bpc-chip { transition: none !important; }
}
@media (forced-colors: active) {
	.bpc-band { fill: Highlight; fill-opacity: .2; }
	.bpc-mark, .bpc-dot, .bpc-focus { forced-color-adjust: none; background: Highlight; }
	.bpc-heat__cell { forced-color-adjust: none; }
}