/* GD Tools - Charts (front). All colours and sizes come from inline --gdch-*
   vars; each bar row carries --v (0-1 length), --c (bar colour) and --tc
   (value text colour). One markup serves both orientations: .gdch--h lays rows
   out on a shared grid (subgrid keeps every track the same width), .gdch--v
   turns rows into bottom-aligned columns. The vertical-to-horizontal flip for
   narrow cards is a per-chart inline container query (GD_Charts::flip_style),
   because its breakpoint depends on the number of bars. Sizes in px,
   line-heights unitless. */
.gdch{
  width:100%;margin:0 0 20px;text-align:left;
  background:var(--gdch-bg);border:var(--gdch-bw) solid var(--gdch-bd);border-radius:var(--gdch-r);
  container-type:inline-size;transition:border-color .2s
}
.gdch:hover{border-color:var(--gdch-hbd)}
.gdch:last-child{margin-bottom:0}
.gdch *{box-sizing:border-box}
.gdch-in{padding:var(--gdch-pad)}

.gdch .gdch-title{margin:0 0 8px;padding:0;width:auto;color:var(--gdch-tc);font-size:var(--gdch-ts);font-weight:800;line-height:1.25;text-transform:none;letter-spacing:0}
.gdch .gdch-sub{margin:0;color:var(--gdch-sc);font-size:var(--gdch-ss);font-weight:700;line-height:1.35}

.gdch .gdch-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0}
.gdch .gdch-legend li{list-style:none;display:flex;align-items:center;gap:8px;margin:0;padding:0;color:var(--gdch-gc);font-size:var(--gdch-gs);line-height:1.3}
.gdch-sw{flex:0 0 auto;width:12px;height:12px;border-radius:2px}

.gdch .gdch-rows{list-style:none;margin:26px 0 0;padding:0}
.gdch .gdch-row{list-style:none;margin:0;padding:0}
.gdch-lbl{color:var(--gdch-lc);font-size:var(--gdch-ls);font-weight:700;line-height:1.2}
.gdch-val{color:var(--tc);font-size:var(--gdch-vs);font-weight:700;line-height:1.2;white-space:nowrap}
.gdch-track{display:block;border-radius:var(--gdch-br)}
.gdch--track .gdch-track{background:var(--gdch-trk)}
.gdch-bar{display:block;background:var(--c);border-radius:var(--gdch-br)}

.gdch .gdch-foot{margin:24px 0 0;color:var(--gdch-fc);font-size:var(--gdch-fs);line-height:1.45}
.gdch .gdch-foot a{color:inherit;text-decoration:underline}

/* Horizontal bars: label | track | value, tracks aligned across rows */
.gdch--h .gdch-rows{display:grid;grid-template-columns:auto 1fr auto;column-gap:24px;row-gap:var(--gdch-gap);align-items:center}
.gdch--h .gdch-row{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center}
.gdch--h .gdch-track{height:var(--gdch-bt)}
.gdch--h .gdch-bar{height:100%;width:calc(var(--v) * 100%)}
.gdch--h .gdch-val{text-align:right}

/* Vertical columns: value on top, bar grows up from the baseline, label below */
.gdch--v .gdch-rows{display:flex;align-items:flex-end;gap:var(--gdch-gap)}
.gdch--v .gdch-row{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.gdch--v .gdch-val{order:1;text-align:center;white-space:normal;line-height:1.15}
.gdch--v .gdch-track{order:2;display:flex;align-items:flex-end;width:min(100%, var(--gdch-bt));height:var(--gdch-ch)}
.gdch--v .gdch-bar{width:100%;height:calc(var(--v) * 100%)}
.gdch--v .gdch-lbl{order:3;text-align:center}

/* Narrow card (phones, narrow columns) */
@container (max-width:480px){
  .gdch-in{padding:min(var(--gdch-pad), 20px)}
  .gdch--h .gdch-rows{column-gap:14px}
}

@media (prefers-reduced-motion:reduce){
  .gdch{transition:none}
}