/* ============================================================
   Chart primitives (js/ui/charts.js): chart card, legends, delta badge, ring, donut + legend table,
   gauge, stacked bar, ranking bars, progress, domain matrix, heat tiles, dot-bar, sparkline, line chart.
   Colours from tokens only: --viz-*, --track, --good/--bad/--neutral, status *-ink for text.
   Convention: time axes and sparklines run left-to-right in both languages; part-to-whole sweeps and
   bars follow the reading direction.
   ============================================================ */

/* ---------- chart card ---------- */
.chart-card { display: flex; flex-direction: column; gap: 12px; }
.chart-flex { display: flex; align-items: center; gap: 22px 28px; flex-wrap: wrap; }
.chart-svg { display: block; flex: none; direction: ltr; overflow: visible; }

/* legacy list legend (dashboard SDG wheel); new code uses legendTable() */
.legend { display: flex; flex-direction: column; gap: 8px; min-width: 130px; flex: 1; }
.legend-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-dim); font-weight: 600; }
.legend-item .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.legend-item .lv { margin-inline-start: auto; font-family: var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink-hi); font-size: 12.5px; }

/* ---------- legend table: dot · label · value · share ---------- */
.legend-table { border-collapse: collapse; flex: 1; min-width: 170px; font-size: 13px; }
.legend-table td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.legend-table tr:last-child td { border-bottom: 0; }
.legend-table .lt-dot { width: 18px; }
.legend-table .lt-dot i { display: block; width: 8px; height: 8px; border-radius: 50%; }
.legend-table .lt-label { color: var(--ink); font-weight: 600; padding-inline-end: 12px; }
.legend-table .lt-val { text-align: end; color: var(--ink-hi); font-weight: 650; width: 1%; white-space: nowrap; padding-inline-end: 12px; }
.legend-table .lt-pct { text-align: end; color: var(--ink-faint); font-size: 12px; font-weight: 600; width: 1%; white-space: nowrap; }
.legend-table tr.zero .lt-label, .legend-table tr.zero .lt-val { color: var(--ink-faint); }
.legend-table tr.zero .lt-dot i { opacity: .35; }

/* ---------- delta badge (direction-aware: goodness = sign(delta) × direction) ---------- */
.delta-badge {
  display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap;
  font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--neutral);
}
.delta-badge .db-arrow { font-size: .78em; }
.delta-badge .num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.delta-badge .db-suffix { font-weight: 600; color: var(--ink-faint); }
.delta-badge.good { color: var(--sage-ink); }
.delta-badge.bad { color: var(--coral-ink); }

/* ---------- ring (completeness on cards) ---------- */
.ring-chart { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.ring-chart .ring-sub { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-dim); text-align: center; max-width: 12ch; }
html[lang="ar"] .ring-chart .ring-sub { font-size: 12.5px; }

/* ---------- gauge ---------- */
.gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gauge-caption { font-size: 12.5px; color: var(--ink-dim); font-weight: 600; }

/* ---------- stacked bar: 10px, pill ends, 2px gaps; one-line legend with values ---------- */
.stacked-bar { display: flex; gap: 2px; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--viz-track); }
.stacked-bar > span { height: 100%; min-width: 3px; transition: flex-basis var(--slow), flex-grow var(--slow); }
.stacked-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.stacked-legend .sl-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-dim); white-space: nowrap; }
.stacked-legend .sw { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stacked-legend b { font-family: var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink-hi); font-weight: 650; }

/* ---------- ranking bars (accent / --viz-seq, never coral) ---------- */
.hbar-stack { display: flex; flex-direction: column; gap: 12px; }
.hbar-row { display: grid; grid-template-columns: minmax(110px, 170px) 1fr minmax(46px, auto); align-items: center; gap: 12px; font-size: 13px; }
.hbar-label { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 6px; border-radius: var(--radius-pill); background: var(--viz-track); overflow: hidden; }
.hbar-fill { height: 100%; border-radius: inherit; transition: width var(--slow); background: var(--hb, var(--accent)); }
.hbar-row .stacked-bar { height: 8px; }
.hbar-val { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 650; color: var(--ink-hi); text-align: end; }

/* progress bar */
.prog { height: 6px; border-radius: var(--radius-pill); background: var(--viz-track); overflow: hidden; }
.prog > span { display: block; height: 100%; border-radius: inherit; background: var(--pc, var(--accent)); transition: width var(--slow); }

/* ---------- domain matrix: name · 6px meter · n/m (replaces the heat tiles on desktop) ---------- */
.domain-matrix { display: flex; flex-direction: column; }
.dm-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(80px, 1fr) 5ch; align-items: center; gap: 16px;
  min-height: 42px; padding: 6px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.dm-row:last-child { border-bottom: 0; }
a.dm-row { transition: background var(--fast); border-radius: 6px; }
a.dm-row:hover { background: var(--surface-2); }
.dm-label { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-meter { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--viz-track); overflow: hidden; }
.dm-meter > i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: inherit; background: var(--accent); transition: width var(--slow); }
.dm-val { text-align: end; font-size: 13px; font-weight: 650; color: var(--ink-hi); white-space: nowrap; }
.dm-row.full .dm-label { color: var(--ink-hi); }
.dm-row.na .dm-label, .dm-row.na .dm-val { color: var(--ink-faint); }

/* ---------- heat tiles (compact / mobile) ---------- */
.heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.heat-tile {
  --ht: var(--ink-dim);
  border-radius: var(--radius-sm); padding: 10px 12px; min-height: 72px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line); cursor: default;
}
.heat-tile .ht-label { font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.heat-tile .ht-val { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--ink-hi); }
.heat-tile .ht-val::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ht); }
.heat-tile.hi { --ht: var(--sage); }
.heat-tile.mid { --ht: var(--gold); }
.heat-tile.lo { --ht: var(--coral); }
.heat-tile.na .ht-val { color: var(--ink-faint); }

/* ---------- dot-bar: places on one shared 0→max axis ---------- */
.dot-bar { --db-reserve: 84px; /* set per chart from the widest value */ display: flex; flex-direction: column; gap: 4px; }
.db-row {
  --p: 0;
  display: grid; grid-template-columns: minmax(120px, 190px) 1fr; align-items: center; gap: 14px;
  min-height: 30px; color: inherit; text-decoration: none;
}
.db-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.db-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-mark { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c); border: 2px solid var(--c); }
.db-mark.district { background: var(--surface); }
.db-flag {
  display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%;
  font: 800 10.5px/1 var(--f-num); color: var(--gold-ink); background: var(--gold-soft); cursor: help;
}
.db-track { position: relative; height: 22px; }
.db-track::before { /* the shared axis */
  content: ""; position: absolute; inset-inline: 0 var(--db-reserve); top: 50%; height: 2px; margin-top: -1px;
  border-radius: var(--radius-pill); background: var(--viz-track);
}
.db-bar {
  position: absolute; inset-inline-start: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: var(--radius-pill);
  width: calc((100% - var(--db-reserve)) * var(--p)); background: var(--c); opacity: .55;
  transition: width 500ms var(--ease-out);
}
.db-dot {
  position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; margin-inline-start: -5.5px; border-radius: 50%;
  inset-inline-start: calc((100% - var(--db-reserve)) * var(--p)); background: var(--c); border: 2px solid var(--c);
  box-shadow: 0 0 0 2px var(--surface); transition: inset-inline-start 500ms var(--ease-out);
}
.db-row.district .db-dot { background: var(--surface); }
.db-val {
  position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap;
  inset-inline-start: calc((100% - var(--db-reserve)) * var(--p) + 12px);
  font-size: 12.5px; font-weight: 650; color: var(--ink-hi); transition: inset-inline-start 500ms var(--ease-out);
}
.db-row.na .db-bar, .db-row.na .db-dot { display: none; }
.db-row.na .db-val { color: var(--ink-faint); }
a.db-row:hover .db-name { color: var(--ink-hi); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- sparkline ---------- */
.spark { display: block; flex: none; direction: ltr; overflow: visible; }

/* ---------- line chart ---------- */
.line-chart { position: relative; direction: ltr; }
.line-chart svg { display: block; overflow: visible; }
.line-chart .lc-grid { stroke: var(--viz-grid); stroke-width: 1; stroke-dasharray: 3 4; }
.line-chart .lc-base { stroke: var(--line-strong); stroke-width: 1; }
.line-chart .lc-tick { fill: var(--viz-axis); font: 500 11px var(--f-num); font-variant-numeric: tabular-nums; }
.line-chart .lc-period { fill: var(--ink-dim); font: 600 11.5px var(--f-num); font-variant-numeric: tabular-nums; }
.line-chart .lc-marker-pill { fill: var(--gold-soft); stroke: color-mix(in srgb, var(--gold) 45%, transparent); stroke-width: 1; }
.line-chart .lc-marker-text { fill: var(--gold-ink); font: 700 11px var(--f-body-ar); }
html[lang="en"] .line-chart .lc-marker-text { font-family: var(--f-body-en); }
.line-chart .lc-marker { cursor: help; }
.line-chart .lc-pill text { fill: var(--accent-ink); font: 650 11px var(--f-num); font-variant-numeric: tabular-nums; }
.line-chart .lc-pill.alt rect { stroke: var(--line-strong); stroke-width: 1; }
.line-chart .lc-pill.alt text { fill: var(--ink-dim); }
.line-chart .lc-guide { stroke: var(--line-strong); stroke-width: 1; pointer-events: none; }
.lc-tip {
  position: absolute; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border-radius: 8px;
  background: var(--float, var(--surface)); border: 1px solid var(--line); box-shadow: var(--shadow-pop);
  font-size: 12px; color: var(--ink); white-space: nowrap;
}
.lc-tip[hidden] { display: none; }
.lc-tip b { font-size: 11.5px; font-weight: 700; color: var(--ink-dim); }
.lc-tip span { display: flex; align-items: center; gap: 7px; }
.lc-tip i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lc-tip em { font-style: normal; color: var(--ink-dim); }
.lc-tip .num { font-weight: 700; color: var(--ink-hi); }
.lc-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-dim); margin-top: 6px; }
.lc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lc-legend i { width: 18px; border-top-width: 2px; }

@media (max-width: 700px) {
  .hbar-row { grid-template-columns: minmax(80px, 110px) 1fr minmax(40px, auto); gap: 8px; }
  .dm-row { grid-template-columns: minmax(0, 1.5fr) minmax(56px, 1fr) 4ch; gap: 12px; }
  .dot-bar { gap: 8px; }
  .db-row { grid-template-columns: 1fr; gap: 2px; }
}