/* Analysis topics (wave B4 owner: analysis): Allocation & concentration,
   Tax if sold, Data health. The pages reuse the Insights card layout
   (insights.css); this file adds the rows, the target editor, the per-account
   tax bars, the envelope rows, the "All clear" state and the taxWaterfall
   chart. Content sits on --bg / --cell: no glass here. Tokens only. */

/* ---------------------------------------------------------------- shared rows */
.an-val { display: inline-flex; align-items: baseline; gap: var(--radius-sm); font-variant-numeric: tabular-nums; }
.an-val-pct {
  text-align: right;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
}
.an-drift { color: var(--label-2); font-variant-numeric: tabular-nums; }
.an-drift.is-off { color: var(--warn); }
.an-link { color: var(--label-2); }
.an-cards .ins-card-rows > .ui-row .ui-cell-sec { white-space: normal; }

/* ---------------------------------------------------------------- target editor */
.an-tgt { position: relative; display: block; }
.an-tgt::before {
  content: ''; position: absolute; top: 0; right: 0; left: var(--margin);
  height: var(--hairline); background: var(--sep);
}
.an-tgt-row { display: flex; align-items: center; gap: var(--radius-sm); min-height: var(--row-min); }
.an-tgt-label { flex: 1 1 auto; min-width: 0; }
.an-tgt-now {
  flex: none; font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.an-tgt-field { flex: none; min-width: 0; width: calc(var(--tap-min) * 2); }
.an-tgt-field .ui-field-input { width: 100%; }
.an-tgt-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--radius-sm); flex-wrap: wrap; }
.an-tgt-sum { font: var(--t-subhead); letter-spacing: var(--tr-subhead); color: var(--label-2); font-variant-numeric: tabular-nums; }
.an-tgt-sum.is-off { color: var(--warn); }
.an-tgt-actions { display: inline-flex; align-items: center; gap: var(--radius-sm); margin-left: auto; }
.an-tgt-actions .ui-btn-text { min-height: var(--tap-min); }
.an-tgt-actions .ui-btn-text[hidden] { display: none; }
.an-tgt-err {
  margin: 0 var(--margin) var(--radius-sm);
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--neg);
}
.an-tgt-err[hidden] { display: none; }
.an-tgt-note {
  margin: 0 var(--margin) var(--cell-pad-y);
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
}

/* ---------------------------------------------------------------- tax rows */
.an-taxrow { align-items: flex-start; }
.an-taxrow .ui-cell-main { gap: var(--viz-label-gap); }
.an-taxrow > .ui-cell-value { padding-top: var(--hairline); }
.an-stack {
  display: flex; gap: var(--hairline); width: 100%;
  height: var(--viz-hbar-h); margin: var(--radius-xs) 0 0;
}
.an-stack-seg {
  display: block; flex: 0 0 calc(var(--w) * 100%);
  min-width: var(--viz-hbar-min); height: 100%;
  border-radius: calc(var(--viz-hbar-h) / 4);
  transform-origin: 0 50%;
  animation: an-grow var(--dur-entry) var(--ease-out) backwards;
}
.an-stack-net { background: var(--viz-tax-net); }
.an-stack-acq { background: var(--viz-tax-acq); }
.an-stack-gains { background: var(--viz-tax-gains); }
.an-taxrow-split {
  font: var(--t-caption1); letter-spacing: var(--tr-caption1); color: var(--label-2);
  font-variant-numeric: tabular-nums; white-space: normal;
}
@keyframes an-grow { from { transform: scaleX(0); opacity: 0; } }

/* ---------------------------------------------------------------- envelope rows */
.an-envrow .ui-cell-main { gap: var(--viz-label-gap); }
.an-env-bar { margin-top: var(--radius-xs); }
.an-env-status {
  display: inline-flex; align-items: center; gap: var(--radius-xs);
  color: var(--label-2); font-variant-numeric: tabular-nums;
}
.an-env-status.is-reached { color: var(--pos); }
.an-env-status svg { width: var(--icon-chevron); height: var(--icon-chevron); }

/* ---------------------------------------------------------------- data health */
.an-health-dot { color: var(--warn); }
.an-hrow .ui-cell-label, .an-hrow .ui-cell-sec { white-space: normal; overflow: visible; }
.an-health-dot svg { width: var(--icon); height: var(--icon); }
.an-clear { margin-top: 0; }
.an-clear-body {
  display: grid; justify-items: center; gap: var(--radius-sm);
  padding: calc(var(--margin) * 1.5) var(--margin);
  text-align: center;
}
.an-clear-icon {
  display: grid; place-items: center;
  width: calc(var(--tap-min) * 1.2); height: calc(var(--tap-min) * 1.2);
  border-radius: var(--radius-full);
  color: var(--pos); background: var(--fill);
}
.an-clear-icon svg { width: var(--icon-tab); height: var(--icon-tab); }
.an-clear-title { margin: 0; font: var(--t-headline); letter-spacing: var(--tr-headline); }
.an-clear-text { margin: 0; font: var(--t-subhead); letter-spacing: var(--tr-subhead); color: var(--label-2); text-wrap: balance; }

/* ---------------------------------------------------------------- taxWaterfall chart
   Bars reuse the periodWaterfall classes (charts.css): levels grey, taxes
   red; the acquisition tax is a lighter red. Flat fills, no outline. */
.viz-wf-bar.viz-taxw-acq { fill-opacity: 0.55; }
svg.viz-taxw rect { fill: var(--label-3); }
svg.viz-taxw rect.viz-wf-markets { fill: var(--neg); }
svg.viz-taxw rect.viz-wf-end { fill: var(--label-2); }

/* ---------------------------------------------------------------- account view (Tiles | Pie)
   The Allocation "Where is my money?" card switches between the treemap and
   the donut; both fill each account flat with its own colour (palette.mjs).
   These rules override the treemap's grey-tile look from charts.css. */
.an-view { display: flex; justify-content: flex-start; margin: 0 0 var(--radius-sm); }
.an-group-toggle { margin-top: 12px; }
.an-group-toggle > .ui-group { margin: 0; background: var(--cell-2); }
.an-group-toggle[hidden] { display: none; }

/* treemap tiles filled with the account colour; the ink (white or near-black,
   4.5:1 or more) is set per tile, so the texts inherit it */
.viz-tree-tile.is-filled { color: inherit; transition: opacity var(--dur-press-out) var(--ease-linear); }
.viz-tree-tile.is-filled .viz-tree-name { color: inherit; font-weight: 600; }
.viz-tree-tile.is-filled .viz-tree-share,
.viz-tree-tile.is-filled .viz-tree-value { color: inherit; }
button.viz-tree-tile.is-filled:active { opacity: 0.72; transition-duration: 0ms; }
.viz-tree-legend .viz-chip { margin-right: 0; }

/* account chip before the name in the small multiples */
.viz-mult-chip { vertical-align: 0.05em; }

/* donut: flat slices with a 2 px gap, the total in the hole, the legend
   under the ring (two columns), or beside it in a short host */
.viz-donut-wrap { display: flex; flex-direction: column; align-items: stretch; gap: var(--radius-sm); }
.viz-donut-fig { position: relative; align-self: center; flex: none; }
.viz-donut { display: block; overflow: visible; }
.viz-donut-slice { stroke: none; }
.viz-donut-slice.is-tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity var(--dur-press-out) var(--ease-linear); }
.viz-donut-slice.is-tappable:active { opacity: 0.72; transition-duration: 0ms; }
.viz-donut-centre {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; text-align: center;
}
.viz-donut-total {
  font: var(--t-headline); letter-spacing: var(--tr-headline); color: var(--label);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.viz-donut-cap { font: var(--t-caption1); letter-spacing: var(--tr-caption1); color: var(--label-2); }
.viz-donut-legend {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--margin);
}
.viz-donut-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: var(--radius-xs); align-items: baseline; align-content: center;
  min-height: var(--tap-min); margin: 0; padding: var(--radius-xs) 0;
  border: 0; background: none; color: var(--label); text-align: left;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote);
  font-variant-numeric: tabular-nums;
}
.viz-donut-item .viz-chip { grid-row: 1; margin-right: 0; align-self: center; }
.viz-donut-name { grid-row: 1; grid-column: 2; overflow-wrap: break-word; }
.viz-donut-share { grid-row: 1; grid-column: 3; font-weight: 400; }
.viz-donut-value { grid-row: 2; grid-column: 2 / 4; color: var(--label-2); }
button.viz-donut-item { cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: var(--radius-xs); }
button.viz-donut-item:active { opacity: 0.6; }
button.viz-donut-item:focus-visible { outline: calc(var(--hairline) * 4) solid var(--tint); outline-offset: 0; }
.viz-donut-wrap.is-compact { flex-direction: row; align-items: center; gap: var(--margin); }
.viz-donut-wrap.is-compact .viz-donut-legend { grid-template-columns: minmax(0, 1fr); flex: 1 1 auto; min-width: 0; row-gap: var(--radius-xs); }
.viz-donut-wrap.is-compact .viz-donut-item { min-height: 0; padding: 0; grid-template-rows: auto; }
.viz-donut-wrap.is-compact .viz-donut-total { font: var(--t-footnote); letter-spacing: var(--tr-footnote); font-weight: 600; }

/* ---------------------------------------------------------------- fun facts
   The banknote stack next to a person of the user's height, to scale. Flat
   fills; the drawing gives the amount away, so it hides under the mask. */
/* the banknote picked for the stack: six options on one row */
.ff-notes { padding: 0 var(--margin) var(--radius-sm); }
.ff-notes .ui-seg-btn { padding: 0 4px; font: var(--t-footnote); font-weight: 600; letter-spacing: var(--tr-footnote); }
.ff-fig-wrap { display: flex; justify-content: center; padding: var(--radius-xs) 0 var(--radius-sm); }
.ff-fig { display: block; width: 100%; max-width: calc(var(--tap-min) * 6); height: auto; overflow: visible; }
.ff-person { fill: var(--label-3); }
.ff-stack { fill: var(--chart-added); }
.ff-band { stroke: var(--cell); stroke-width: 0.6; }
.ff-level { stroke: var(--label-2); stroke-width: 1; stroke-dasharray: 3 3; }
.ff-ground { stroke: var(--sep); stroke-width: 1; }
.is-masked .ff-fig :is(.ff-stack, .ff-band, .ff-level) { visibility: hidden; }
.ff-card .ins-card-finding { white-space: normal; }
/* the six stacks next to you (heights to scale, tall ones cut), the picked
   note in the 'you' colour; suitcases of 23 kg; length against a landmark */
.ff-lineup { padding: var(--radius-sm) var(--margin) var(--radius-xs); }
.ff-lineup-fig { display: block; width: 100%; max-width: calc(var(--tap-min) * 9); height: auto; margin: 0 auto; overflow: visible; }
.ff-lu-stack rect { fill: var(--label-3); transform-box: fill-box; transform-origin: 50% 100%; }
.ff-lu-stack.is-on rect { fill: var(--chart-added); }
.ff-lu-cut { stroke: var(--cell); stroke-width: 1.5; }
.ff-lu-h { fill: var(--label-2); font: var(--t-caption2); letter-spacing: var(--tr-caption2); font-variant-numeric: tabular-nums; }
.ff-lu-lbl { fill: var(--label-2); font: var(--t-caption2); letter-spacing: var(--tr-caption2); }
.ff-lu-lbl.is-on { fill: var(--label); font-weight: 600; }
.ff-viz-cap {
  margin: var(--radius-xs) 0 0;
  font: var(--t-caption2); letter-spacing: var(--tr-caption2); color: var(--label-3);
}
.ff-vizrow .ui-cell-main { gap: var(--viz-label-gap); }
.ff-viz { margin-top: var(--radius-xs); }
.ff-bags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--radius-xs) var(--radius-sm); }
.ff-bags .ff-viz-cap { margin: 0; }
.ff-bags-fig { display: block; max-width: 100%; height: auto; overflow: visible; }
.ff-bag { fill: none; stroke: var(--label-3); stroke-width: 1.2; }
.ff-bag-fill { fill: var(--chart-added); }
.ff-bag-handle { fill: none; stroke: var(--label-3); stroke-width: 1.5; stroke-linecap: round; }
.bm-bars.ff-len-bars { grid-template-columns: max-content minmax(0, 1fr); }
.is-masked :is(.ff-lu-stack, .ff-viz) { visibility: hidden; }
.is-masked .ff-viz { display: none; }

/* ---------------------------------------------------------------- compared with other countries
   The country switch above the page (four labels: tighter padding, and it
   scrolls sideways rather than clipping when a locale's labels are wider than
   the screen), the exchange-rate / purchasing-power switch with its rate
   line, the household caveat under the headline, the rank strip (published
   ranks and the user's place; ranks only, so it stays visible under the
   mask), held vs not-held product rows and the source line of each card. */
.bm-country {
  padding: var(--cell-pad-y) var(--margin) 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bm-country::-webkit-scrollbar { display: none; }
.bm-country .ui-seg-btn { padding: 0 8px; font: var(--t-footnote); font-weight: 600; letter-spacing: var(--tr-footnote); }
.bm-basis { margin: 0 var(--margin) var(--radius-sm); }
.bm-basis .ui-seg-btn { padding: 0 10px; font: var(--t-footnote); font-weight: 600; letter-spacing: var(--tr-footnote); }
.bm-basis .bm-rate { margin: var(--radius-xs) 0 0; }
.bm-caveat {
  margin: 0 var(--margin) var(--radius-sm);
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
}
.bm-strip-wrap { padding: var(--radius-xs) 0 0; }
.bm-strip { display: block; width: 100%; height: auto; overflow: visible; }
.bm-track { stroke: var(--fill); stroke-width: 4; stroke-linecap: round; }
.bm-tick { stroke: var(--label-3); stroke-width: 1.5; }
.bm-tick--mid { stroke: var(--label-2); }
.bm-lbl { fill: var(--label-2); font: var(--t-caption2); letter-spacing: var(--tr-caption2); }
.bm-you { fill: var(--label); stroke: var(--cell); stroke-width: 2; }
.bm-zone { stroke: var(--label); stroke-width: 4; stroke-linecap: round; }
.bm-you-lbl { fill: var(--label); font: var(--t-caption1); letter-spacing: var(--tr-caption1); font-weight: 600; }
.bm-card .ins-card-finding, .bm-card .ins-card-rows .ui-cell-sec, .bm-card .ins-card-rows .ui-cell-label { white-space: normal; }
.bm-not-held .ui-cell-label { color: var(--label-2); }
.bm-src {
  margin: var(--radius-sm) 0 0; padding: 0 var(--cell-pad-x);
  font: var(--t-caption1); letter-spacing: var(--tr-caption1); color: var(--label-3);
}

/* group chip at the top of each card: your age bracket (the 'you' colour) or
   all ages (grey); it says whom every figure of the card compares you with */
.bm-chip {
  display: block; width: fit-content; margin: 0 var(--cell-pad-x) calc(var(--cell-pad-y) * 0.5); padding: 2px 8px;
  border-radius: var(--radius-full);
  font: var(--t-caption1); letter-spacing: var(--tr-caption1); font-weight: 600;
}
.bm-chip--age { color: var(--chart-added); background: color-mix(in srgb, var(--chart-added) 16%, transparent); }
.bm-chip--all { color: var(--label-2); background: var(--fill); }

/* horizontal bars: label, track, value on one line each; your bar in the
   'you' colour, published figures grey; past the scale your bar ends in an
   arrow. Under the mask your bar (and the arrow line) hide: the scale comes
   from published figures only, so the grey bars give nothing away. */
.bm-viz { margin: var(--radius-sm) 0 0; }
.bm-viz-title {
  margin: 0 0 var(--radius-xs);
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); font-weight: 600; color: var(--label);
}
.bm-comp + .bm-comp { margin-top: var(--radius-sm); }
.bm-bars {
  display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content;
  column-gap: var(--radius-sm); row-gap: 6px; align-items: center;
}
.bm-bar-lbl {
  font: var(--t-caption1); letter-spacing: var(--tr-caption1); color: var(--label-2);
  max-width: 9.5em; overflow-wrap: anywhere;
}
.bm-bar-lbl.is-you { color: var(--label); font-weight: 600; }
.bm-bar-track, .bm-pbar {
  position: relative; display: block; height: 10px; border-radius: 3px; background: var(--fill); overflow: hidden;
}
.bm-bar-fill {
  display: block; height: 100%; width: calc(var(--w, 0) * 100%); min-width: 2px;
  border-radius: 3px; background: var(--label-3); transform-origin: 0 50%;
}
.bm-bar--you .bm-bar-fill, .bm-pbar.is-on .bm-bar-fill { background: var(--chart-added); }
.bm-bar-fill.is-over {
  border-radius: 3px 0 0 3px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
}
.bm-bar-val {
  text-align: right; font: var(--t-caption1); letter-spacing: var(--tr-caption1); color: var(--label);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bm-viz-cap {
  margin: var(--radius-xs) 0 0;
  font: var(--t-caption2); letter-spacing: var(--tr-caption2); color: var(--label-3);
}
.is-masked .bm-bar--you .bm-bar-fill, .is-masked .bm-viz-over, .is-masked .bm-ba-you { visibility: hidden; }

/* product rows: the share holding it as a bar under the name */
.bm-prow .ui-cell-main { gap: var(--viz-label-gap, 2px); }
.bm-prow .bm-pbar { margin-top: var(--radius-xs); height: 6px; }

/* median by age bracket: columns, your bracket and your dot in the 'you' colour */
.bm-byage { display: block; width: 100%; height: auto; overflow: visible; }
.bm-ba-base { stroke: var(--sep); stroke-width: 1; }
.bm-ba-col { fill: var(--label-3); transform-box: fill-box; transform-origin: 50% 100%; }
.bm-ba-col.is-mine { fill: color-mix(in srgb, var(--chart-added) 45%, transparent); }
.bm-lbl.is-mine { fill: var(--label); font-weight: 600; }
.bm-ba-dot { fill: var(--chart-added); stroke: var(--cell); stroke-width: 2; }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  .an-stack-seg { animation: none; }
  .viz-tree-tile.is-filled, .viz-donut-slice.is-tappable { transition: none; }
}