/* ----------------------------------------------------------- chart frame
 * templates/ui/chart_frame.html and the charts of static/js/
 * product-chart.js. One frame for every chart (owner brief C): title (h3)
 * with its footnote marker and a meta note at the right, unit line
 * (micro, graphite), the control bar (the grammar of ui/control-bar.css),
 * the plot, the legend only where the rule asks for one, the source.
 *
 * The two plots without a script: columns (one series; 2 px gap
 * web.chart.column-gap, square, the zero line graphite web.chart.zero-line)
 * and bar_list (a ranking: name and value over a thin track). Heights and widths come as data
 * (--h, --w), never as a style. */
@layer ui {
.chart-frame { margin: 0 0 var(--gap-topic); min-width: 0; }
.chart-frame__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  margin: 0 0 var(--s-2);
}
.chart-frame__title { font-size: var(--t-h3); margin: 0; }
.chart-frame__meta, .chart-frame__unit, .chart-frame__source { font-size: var(--t-micro); color: var(--graphite); }
.chart-frame__unit { margin: 0 0 var(--s-3); max-width: none; }
.chart-frame__plot { min-width: 0; }
.chart-frame__source { margin: var(--s-3) 0 0; max-width: none; }
.chart-frame__chips { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
.chart-frame__chips:empty { display: none; }

.columns {
  position: relative; display: flex; align-items: flex-end; gap: 2px; height: 7.5rem;
  border-bottom: 1px solid var(--graphite);
}
/* A slot of full height per column: the hover band covers it, porcelain
   with a 1 px mist edge like the product charts (K-10, no transparency). */
.columns__slot { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; }
.columns__slot.is-on { background: var(--porcelain); outline: 1px solid var(--mist); outline-offset: -1px; }
.columns__bar { flex: 1 1 0; height: var(--h, 0); min-height: 1px; background: var(--silver); }  /* color.data.single.bar */
.columns__bar--empty { height: 2%; background: var(--cloud); }
.columns__axis {
  display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2);
  font-size: var(--t-micro); color: var(--graphite); font-variant-numeric: tabular-nums;
}
/* The column rule (WEB-DIA-09, DAT-DIA-04): up to twelve columns carry
   their value over the column (web.chart.label.size) and no scale; the
   plot keeps room over the tallest column for it. */
.columns--labelled { margin-top: var(--s-5); }
.columns__value {
  position: absolute; left: 0; right: 0; bottom: calc(var(--h, 2%) + 3px); text-align: center; white-space: nowrap;
  font-size: var(--t-micro); line-height: 1; color: var(--graphite); font-variant-numeric: tabular-nums;
}
/* More than twelve: no values, a scale at the left with the peak and zero
   (the value axis of CorumCharts.bars), the value on hover. */
.columns-plot--scaled { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); }
.columns__scale {
  display: flex; flex-direction: column; justify-content: space-between; text-align: right;
  font-size: var(--t-micro); line-height: 1; color: var(--graphite); font-variant-numeric: tabular-nums;
}
.columns-plot--scaled .columns__axis { grid-column: 2; }
/* A series of zeros: the sentence instead of a chart. */
.columns__none { margin: 0; font-size: var(--t-small); color: var(--graphite); max-width: none; }

.bar-list { list-style: none; margin: 0; padding: 0; }
.bar-list__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: var(--s-1);
  margin-bottom: var(--s-3);
}
.bar-list__name { font-size: var(--t-small); color: var(--ink); overflow-wrap: anywhere; }
.bar-list__value { font-size: var(--t-small); color: var(--graphite); text-align: right; font-variant-numeric: tabular-nums; }
.bar-list__track { grid-column: 1 / -1; height: 6px; background: var(--cloud); }
.bar-list__fill { display: block; width: var(--w, 0); height: 6px; background: var(--silver); }  /* color.data.single.bar */
/* A ranking reads like the rows of a table: the row under the pointer
   stands on porcelain, its value in ink (WEB-ZUS-06, WEB-TAB-08). The value
   is always in sight, so there is no tooltip (DAT-DIA-04). */
.bar-list__row:hover { background: var(--porcelain); }
.bar-list__row:hover .bar-list__value { color: var(--ink); }

/* ---------------------------------------------- the dossiers' time charts
 * (Etappe 3) The bar sits in the plot; the plot holds the tooltip over it. */
.chart-frame .ctl-bar { margin-bottom: var(--s-4); }
.chart-plot { position: relative; min-height: 1px; }
.chart-plot svg { display: block; width: 100%; height: auto; }
/* Axis and value labels in web.chart.label.size (K-21, WEB-DIA-13); the
   scripts write the same size, the rule keeps it a token. */
.chart-plot svg text, .cc-svg text { font-size: var(--t-micro); }
.chart-plot--zoom svg { cursor: crosshair; }
.cc-tip { position: absolute; z-index: 5; left: var(--x, 0); top: var(--y, 0); visibility: hidden;
  pointer-events: none; white-space: nowrap;
  padding: var(--s-2) var(--s-3); font-size: var(--t-micro); line-height: 1.5; color: var(--paper); background: var(--ink); }
.cc-tip strong { font-weight: 300; }
/* Legend: a square key and the name; below the plot at the left. */
.cc-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: var(--s-2) 0 0;
  font-size: var(--t-micro); color: var(--graphite); max-width: none; }
.cc-legend__item { display: inline-flex; align-items: center; margin: 0; }
.cc-key { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: var(--s-1);
  background: var(--c, var(--steel)); }
.cc-key--product { background: var(--corum); }
.cc-key--compare { background: var(--graphite); }
/* The honest window under a time chart. */
.cc-span { margin: var(--s-2) 0 0; font-size: var(--t-micro); color: var(--graphite); max-width: none; }

/* The chart bar: the period segment keeps one line on the desktop; on the
   phone its options wrap as a whole group. «Zoom aufheben» is a text
   action beside the tools. */
.ctl-bar .seg--period .seg__opt { padding: 0 .5rem; }
.ctl-zoom { height: var(--ctl-h); }
.ctl-zoom[hidden] { display: none; }
.ctl-pop[hidden] { display: none; }
.ctl-pop input[type="date"] { box-sizing: border-box; height: var(--ctl-h); padding: 0 var(--s-2); font: inherit;
  font-size: var(--t-small); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-control);
  border-bottom-color: var(--graphite); border-radius: 0; }
.ctl-pop input[type="date"]:focus { outline: 2px solid var(--corum); outline-offset: 1px; }
@media (max-width: 720px) {
  .ctl-bar .seg--period { height: auto; flex-wrap: wrap; }
  .ctl-bar .seg--period .seg__opt { height: var(--ctl-h); } /* K-29: options fill the height */
}

/* ------------------------------------------------------------------ ring
 * At most four parts (K-19, WEB-DIA-08, DAT-TYP-09): with more, the three
 * largest and «Übrige» last, its members in the tooltip. Silver, steel,
 * graphite (color.data.ring.1 to .3), the fourth part or «Übrige» mist
 * (color.data.remainder.ring; ENT-434 no. 75, ENT-316) - a 2 px paper gap
 * between the parts. The legend carries every name and its
 * share, right-aligned in table numerals, so identity never rests on colour. */
.rings { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--half-gap); margin: 0 0 var(--gap-topic); }
.ring { margin: 0; min-width: 0; flex: 1 1 22rem; max-width: 30rem; }
.ring__title { margin: 0 0 var(--s-3); font-size: var(--t-small); color: var(--ink); }
.ring__body { position: relative; display: flex; align-items: flex-start; gap: var(--s-5); }
/* The members of «Übrige» may be many: the tooltip of a ring wraps. */
.ring__body .cc-tip { white-space: normal; max-width: 16rem; }
/* prf-ignore PRF-WEB-11: Ringgrösse web.chart.ring.size (150 px) aus 11_TOKENS, ein Datenmass */
.ring__body svg { flex: none; width: 150px; height: 150px; margin-top: .3rem; }
.ring__legend { list-style: none; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-size: var(--t-micro);
  color: var(--slate); }
.ring__legend li { display: flex; align-items: baseline; gap: var(--s-2); padding: var(--s-1) 0; border-bottom: 1px solid var(--cloud); }
.ring__key { flex: none; align-self: center; width: 10px; height: 10px; }
.ring__name { min-width: 0; overflow-wrap: anywhere; }
.ring__pct { margin-left: auto; padding-left: var(--s-3); color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
path.ring__part { stroke: var(--paper); stroke-width: 2; stroke-linejoin: round; }
/* color.data.ring.1 to .3 and color.data.remainder.ring (ENT-434 no. 75): the
   token file names no CSS variable for them, so the palette variable their
   alias points to stands here (WEB-TOK-01/-02, no invented name). */
.ring__part--1 { fill: var(--silver); background: var(--silver); }
.ring__part--2 { fill: var(--steel); background: var(--steel); }
.ring__part--3 { fill: var(--graphite); background: var(--graphite); }
.ring__part--4 { fill: var(--mist); background: var(--mist); }
/* Hover pairs a part with its legend row (static/js/table.js): the row in
   porcelain and ink, the part with an ink edge (WEB-ZUS-06). */
.ring__legend li.is-hot { background: var(--porcelain); color: var(--ink); }
path.ring__part.is-hot { stroke: var(--ink); stroke-width: 1.5; }
circle.ring__part { fill: none; }
circle.ring__part--1 { stroke: var(--silver); }
circle.ring__part--2 { stroke: var(--steel); }
circle.ring__part--3 { stroke: var(--graphite); }
circle.ring__part--4 { stroke: var(--mist); }
@media (max-width: 720px) {
  .ring { max-width: none; }
  /* prf-ignore PRF-WEB-11: Ringgrösse web.chart.ring.size-phone (120 px) aus 11_TOKENS, ein Datenmass */
  .ring__body svg { width: 120px; height: 120px; }
}

/* ------------------------------------------------ bar plots of the Monthly
 * Tactical scores and regime factors (scorebars), the regime scale
 * (regime) and the mandate profiles' bars (bars). Bars sit either side of a
 * zero line in graphite (color.data.axis); the side carries the direction
 * and the signed number repeats it, so no reading rests on colour. Over-
 * and underweight are neutral in slate (color.data.position.bar; K-20,
 * WEB-DIA-11, DAT-SKA-06, ENT-106); red is left for the one change under
 * discussion. The markup is PositionBars (ui/chart_frame.html,
 * position_bars). A length is --w, a position on the scale is --x (never
 * left/width in markup). The profile bars (.bars) are one series, silver
 * (color.data.single.bar), the chosen profile the one statement in corum
 * (DAT-TYP-04). */
.scorebars { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.scorebars__head, .scorebars__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(9rem, 20rem) 3rem;
  column-gap: var(--s-5); align-items: center;
}
.scorebars__head { font-size: var(--t-micro); color: var(--ink); padding: var(--s-3) 0; border-bottom: 1px solid var(--ink); }
.scorebars__scale { position: relative; height: 1.2em; color: var(--graphite); }
.scorebars__scale > span { position: absolute; top: 0; left: var(--x, 0); transform: translateX(-50%);
  font-variant-numeric: tabular-nums; }
.scorebars__group { font-size: var(--t-small); color: var(--ink); margin: 0; max-width: none;
  padding: var(--s-5) 0 var(--s-2); border-bottom: 1px solid var(--cloud); }
.scorebars__row { padding: var(--s-2) 0; border-bottom: 1px solid var(--cloud); font-size: var(--t-small); }
.scorebars__row:last-child { border-bottom: 0; }
.scorebars__name { min-width: 0; overflow-wrap: anywhere; }
.scorebars__name .cell-sub { display: block; }
.scorebars__track { position: relative; height: 12px; }
.scorebars__track::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px;
  background: var(--graphite); }
.scorebars__fill { position: absolute; top: 0; height: 100%; }
.scorebars__fill--plus, .scorebars__fill--minus { background: var(--slate); }
/* The one change under discussion (color.data.position.change, DAT-SKA-06):
   at most one row of a view, it is that view's red statement. */
.scorebars__fill--change { background: var(--corum); }
.scorebars__value.is-change { color: var(--corum); }
/* The track in a table cell (the legacy tilt table of the Investment View). */
.position-table .scorebars__track { display: block; min-width: calc(3 * var(--s-8)); }
.scorebars__value { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.scorebars__value.is-neutral { color: var(--graphite); }
/* A score is a link to its source page: the same hairline as .linkish. */
.scorebars__link { justify-self: end; border-bottom: 1px solid var(--mist); }
.scorebars__link:hover { color: var(--corum); border-bottom-color: var(--corum); }
.scorebars--factors { margin-top: var(--s-6); }
.scorebars__block:last-child .scorebars__row:last-child { border-bottom: 0; }
.scorebars--factors .scorebars__row:first-child { padding-top: var(--s-3); }

.regime { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-6); align-items: end; }
.regime__figure { border-top: 1px solid var(--ink); padding-top: var(--s-3); }
.regime__figure .kpi__label { font-size: var(--t-small); color: var(--ink); }
.regime__zones { display: flex; font-size: var(--t-micro); color: var(--graphite); }
.regime__zone { padding: 0 0 var(--s-2); text-align: center; border-bottom: 6px solid var(--cloud); }
.regime__zone + .regime__zone { border-left: 2px solid var(--paper); }
.regime__zone.is-active { color: var(--ink); border-bottom-color: var(--silver); }
.regime__track { position: relative; height: 18px; }
/* prf-ignore PRF-WEB-11: Marke im Diagramm, ein Datenmass (ENT-434 Nr. 69), kein Abstand */
.regime__marker { position: absolute; top: -14px; left: var(--x, 0); width: 2px; height: 26px; margin-left: -1px;
  background: var(--corum); }
.regime__ticks { position: relative; height: 1.4em; font-size: var(--t-micro); color: var(--graphite);
  font-variant-numeric: tabular-nums; }
.regime__ticks > span { position: absolute; top: 0; left: var(--x, 0); transform: translateX(-50%); }
.regime__ticks > span:first-child { transform: none; }
.regime__ticks > span:last-child { transform: translateX(-100%); }

.bars { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.bars__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 6rem; column-gap: var(--s-5);
  align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--cloud); color: var(--slate); }
.bars__row:last-child { border-bottom: 0; }
.bars__row:hover { color: var(--ink); background: var(--porcelain); }
.bars__row.is-active { color: var(--ink); }
.bars__row.is-active .bars__name { color: var(--corum); }
.bars__track { position: relative; height: 14px; }
.bars--diverging .bars__track::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px;
  width: 1px; background: var(--graphite); }
.bars__fill { position: absolute; top: 0; height: 100%; background: var(--silver); }
.bars__row.is-active .bars__fill { background: var(--corum); }
.bars__value { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--t-h3); }

@media (max-width: 720px) {
  .scorebars__head { grid-template-columns: minmax(0, 1fr) 3rem; }
  .scorebars__head .scorebars__scale { display: none; }
  .scorebars__row { grid-template-columns: minmax(0, 1fr) 3rem; row-gap: var(--s-2); }
  .scorebars__track { grid-column: 1 / -1; grid-row: 2; }
  .regime { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .bars__row { grid-template-columns: 7.5rem minmax(0, 1fr) 4.75rem; column-gap: var(--s-3); }
  .bars__value { font-size: var(--t-body); }
}

/* What the chart scripts used to set as inline styles (Etappe 6): a place,
 * a length or a colour comes as data (--x, --y, --len, --ox/--oy, --c), the
 * rule stands here. The tooltip shows by a class. Lines and bars stand at
 * once: data is never animated (WEB-BEW-01, WEB-BEW-05, K-25). */
.cc-tip.is-on { visibility: visible; }
.cc-svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------ preference matrix
 * PreferenceMatrix (ui/chart_frame.html, DAT-SKA-01 to DAT-SKA-05): three
 * levels, a filled dot in ink on exactly one of them
 * (color.data.position.current), an open one for the previous level
 * (color.data.position.previous), red only for the one change under
 * discussion (color.data.position.change). Dot and row label share one
 * vertical middle (DAT-SKA-03). The dot is an SVG circle (no rounding). */
.matrix-frame { margin: 0 0 var(--gap-topic); min-width: 0; }
.matrix-frame__head { display: flex; flex-direction: column; gap: var(--s-1); margin: 0 0 var(--s-3); }
.matrix-frame__title { font-size: var(--t-h3); color: var(--ink); }
.matrix-frame__sub, .matrix__legend, .matrix__state { font-size: var(--t-micro); color: var(--graphite); }
.matrix__legend { margin: var(--s-2) 0 0; max-width: none; }
.matrix th.matrix__level, .matrix td.matrix__level { text-align: center; width: var(--s-8); }
.matrix tbody th, .matrix tbody td { vertical-align: middle; }
.matrix-scroll { overflow-x: auto; }  /* a data table scrolls, it never becomes cards (WEB-TAB-12) */
.matrix tbody th { font-weight: 300; text-align: left; padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--mist); }
.dot { display: inline-block; width: var(--s-3); height: var(--s-3); vertical-align: middle; }
.dot--current circle { fill: var(--ink); }
.dot--previous circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.dot--change circle { fill: var(--corum); }
}  /* @layer ui */