/* Chart helpers (js/core/charts.js). Sizes come in as CSS custom properties set through el.style.setProperty
   (CSP-safe), e.g. --h: 62% on a bar. Bars grow with the design's 600ms cubic-bezier(.2,0,0,1).
   Direction-safe (docs/I18N_V4.md): time runs with the reading direction (charts.js; flex rows follow <html dir>). */

/* ---------- Bar ramp (the reviews card: bars per bucket, optional stacked parts) ---------- */
.ramp { display: flex; align-items: flex-end; gap: 8px; width: 100%; height: 110px; padding-top: 10px; }
.ramp-bar {
  flex: 1; min-width: 0; height: var(--h, 0%); min-height: 10px; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column-reverse; position: relative; background: var(--bar, var(--ac-45b));
  transition: height var(--m-dur, var(--t-bar)) var(--ease); color: var(--text);
}
.ramp-bar.empty { min-height: 4px; background: rgba(0, 0, 0, .14); }
.ramp-part { flex: none; height: var(--p, 0%); background: var(--c, transparent); }
.ramp-label {
  position: absolute; top: 8px; left: 0; right: 0; text-align: center; font-size: var(--fs-small);
  color: var(--lc, var(--text)); white-space: nowrap; pointer-events: none;
}
.ramp-bar.few { opacity: .55; }
.ramp-axis { display: flex; gap: 8px; width: 100%; }
.ramp-axis span { flex: 1; min-width: 0; text-align: center; font-size: var(--fs-tiny); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .75; }
@media (max-width: 700px) {
  .ramp { gap: 6px; height: 96px; padding-top: 8px; }
  .ramp-bar { border-radius: 12px; }
  .ramp-label { top: 6px; font-size: var(--fs-tiny); }
  .ramp-axis { gap: 6px; }
}

/* ---------- Line chart: score line + 12% area + dashed star line, clickable columns ---------- */
.lc { position: relative; height: 200px; }
.lc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc-base { stroke: var(--raised); stroke-width: 1; }
.lc-area { fill: var(--ac-fill); }
.lc-line { fill: none; stroke: var(--ac); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.lc-dash { fill: none; stroke: var(--muted-2); stroke-width: 1.6; stroke-dasharray: 5 5; }
.lc-sel { stroke: var(--white); stroke-width: 1.2; stroke-dasharray: 3 3; }
.lc-dot {
  position: absolute; width: 14px; height: 14px; margin-block: -7px 0; margin-inline: -7px 0; border-radius: 50%; background: #000;
  border: 3px solid var(--ac); pointer-events: none; inset-inline-start: var(--x, 0%); top: var(--y, 0%);
  transition: right 200ms, left 200ms, top 200ms;
}
.lc-cols { position: absolute; inset: 0; display: flex; }
.lc-col { flex: 1; border: none; background: transparent; border-radius: 10px; padding: 0; min-width: 0; }
.lc-col[aria-pressed="true"] { background: rgba(255, 255, 255, .05); }
.lc-labels { display: flex; overflow: hidden; }
.lc-labels span {
  flex: 1; min-width: 0; text-align: center; font-size: var(--fs-small); white-space: nowrap; color: var(--muted-2);
  overflow: visible;
}
.lc-labels span.on { color: var(--text); font-weight: 600; }
.lc-labels span.few, .lc-col.few { opacity: .6; }
/* The end labels never run out of the chart: a label wider than its column grows inwards (Arabic: the first one leftwards
   from the right edge, the last one rightwards from the left edge) instead of being cut by the row's overflow */
.lc-labels span:first-child, .lc-labels span:last-child { display: flex; }
.lc-labels span:first-child { justify-content: flex-start; }
.lc-labels span:last-child { justify-content: flex-end; }
@media (max-width: 700px) {
  .lc { height: 150px; }
  .lc-col { border-radius: 8px; }
  .lc-col[aria-pressed="true"] { background: rgba(255, 255, 255, .06); }
  .lc-labels span { font-size: 10px; }
  .lc-labels span.alt { color: transparent; }
  .lc-labels span.alt.on { color: var(--text); }
}

/* ---------- Diverging bars: praise up (accent), complaints down (#FF7A5C), clickable ---------- */
.dv { display: flex; gap: 8px; }
.dv-y {
  display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-num);
  font-size: var(--fs-tiny); color: var(--muted-2); height: var(--dv-h, 150px); padding-block: 0; padding-inline: 0 2px; flex: none;
}
.dv-bars { flex: 1; min-width: 0; height: var(--dv-h, 150px); display: flex; gap: 4px; }
.dv-bar {
  flex: 1; min-width: 0; display: flex; flex-direction: column; border: none; padding: 0 2px;
  border-radius: 8px; background: transparent; color: inherit;
}
button.dv-bar { cursor: pointer; }
.dv-bar[aria-pressed="true"] { background: rgba(255, 255, 255, .08); }
.dv-up { flex: 1; width: 100%; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-soft); }
.dv-down { flex: 1; width: 100%; display: flex; align-items: flex-start; }
.dv-up span, .dv-down span { display: block; width: 100%; transition: height var(--m-dur, var(--t-bar)) var(--ease); }
.dv-up span { height: var(--up, 0%); background: var(--ac); border-radius: 5px 5px 0 0; }
.dv-down span { height: var(--down, 0%); background: var(--bad); border-radius: 0 0 5px 5px; }
.dv-bar.few { opacity: .55; }
.dv-labels { display: flex; gap: 8px; }
.dv-labels .dv-y-pad { width: 16px; flex: none; }
.dv-labels > div { flex: 1; display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.dv-labels span { flex: 1; min-width: 0; text-align: center; font-size: 10px; white-space: nowrap; color: var(--muted-2); }
.dv-labels span.on { color: var(--text); }

/* ---------- Split bar (complaint · mixed · praise) ---------- */
.split { display: flex; height: 16px; border-radius: var(--r-pill); overflow: hidden; gap: 3px; }
.split > span { width: var(--w, 0%); border-radius: var(--r-pill); transition: width var(--m-dur, var(--t-bar)) var(--ease); }
.split > span.bad { background: var(--bad); }
.split > span.mixed { background: var(--dot-off); }
.split > span.good { background: var(--ac); }
.split > span.fill { flex: 1; width: auto; }
.split.thin { height: 6px; gap: 2px; }
.split.mini { height: 5px; gap: 0; background: var(--sp-track, rgba(0, 0, 0, .1)); }
.split.mini > span { border-radius: 0; }
.on-light .split > span.good { background: #000; }

/* ---------- Horizontal bar (star distribution, reasons, you vs area) ---------- */
.hbar { height: 10px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; flex: 1; min-width: 0; }
.hbar.lg { height: 12px; }
.hbar > span {
  display: block; height: 100%; width: var(--w, 0%); border-radius: var(--r-pill); background: var(--c, var(--ac));
  transition: width var(--m-dur, var(--t-bar)) var(--ease);
}
.hbar > span.bad { background: var(--bad); }
.hbar > span.mute { background: var(--dot-off); }
.hbar > span.grey { background: var(--grey); }
.on-light .hbar { background: var(--light-track); }
.on-light .hbar > span { background: #000; }