/* --------------------------------------------------------- building blocks
 * branding/bausteine.py, portal_html (DAT-BAU-01 to DAT-BAU-07, ENT-435).
 * Score table, allocation table, key-figure band, dates, policy-rate and
 * market table from one model; the mail sets the same model inline. The
 * narrow version follows the width of the block, not of the screen
 * (container below web.breakpoint.compact, 720 px; decision 7). Bars
 * square: score bars slate (color.data.position.bar) on a graphite zero
 * line (DAT-SKA-10), allocation bars silver (color.data.single.bar) with
 * the SAA as an ink mark on one scale for all weight columns (DAT-BAL-12).
 * Widths of the allocation bars and marks as classes w-N and m-N in per
 * cent of the bar area: the publication sanitiser keeps classes, no style
 * attribute (WEB-TOK-08). */
@layer ui {
.bau { container: bau / inline-size; margin: var(--gap-topic) 0; }
.bau__title { font-size: var(--t-h3); color: var(--text-primary); }
.bau__title sup, .bau__source sup { color: var(--text-accent); }
.bau__unit, .bau__meta { font-size: var(--t-micro); color: var(--text-secondary); }
.bau__note, .bau__legend, .bau__source, .bau__perf { font-size: var(--t-micro); color: var(--text-secondary); }
.bau__note, .bau__legend, .bau__source { margin-top: var(--s-2); }
.bau__legend + .bau__source, .bau__note + .bau__source { margin-top: 0; }
.bau__frame { margin-top: var(--s-3); overflow-x: auto; }
.reading .bau table { width: 100%; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.reading .bau th { font-weight: 300; font-size: var(--t-micro); color: var(--text-secondary); text-align: left;
  vertical-align: bottom; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-top: 0; border-bottom: 1px solid var(--rule-medium); }
.reading .bau thead tr:first-child th { border-top: 1px solid var(--slate); }
.reading .bau td { padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--rule-fine);
  vertical-align: middle; text-align: left; }
.reading .bau tbody tr:last-child td { border-bottom-color: var(--rule-strong); }
.reading .bau th[align="right"], .reading .bau td[align="right"] { text-align: right; white-space: nowrap; }
.bau-grp { color: var(--text-primary); }
.bau-l { display: block; padding-left: 1.1rem; }
.bau-sum, .bau-total { display: block; }
.bau-neg { color: var(--corum-dark); }
.bau-sec { color: var(--text-secondary); }
.bau-second { color: var(--text-primary); }
.bau-group { display: block; border-bottom: 1px solid var(--rule-fine); padding-bottom: var(--s-1); }
/* Score table (DAT-BAU-01): six steps of 24 px, 16 px when narrow. */
.bau-scale { display: flex; justify-content: space-between; width: 144px; }
.score-bar { display: block; position: relative; width: 144px; height: 8px; }
.score-bar::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: var(--graphite); }
.score-bar::after { content: ""; position: absolute; top: 0; height: 8px; background: var(--slate); width: 0; }
.score-bar--p1::after, .score-bar--p2::after, .score-bar--p3::after { left: 50%; }
.score-bar--n1::after, .score-bar--n2::after, .score-bar--n3::after { right: 50%; }
.score-bar--p1::after, .score-bar--n1::after { width: 24px; }
.score-bar--p2::after, .score-bar--n2::after { width: 48px; }
.score-bar--p3::after, .score-bar--n3::after { width: 72px; }
/* Allocation table (DAT-BAU-02): bar area 96 px per profile. */
.alloc-bar { display: block; position: relative; width: 96px; height: 8px; }
.alloc-bar__fill { display: block; height: 8px; background: var(--silver); }
.alloc-bar__mark { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink); }
/* Key-figure band (DAT-BAU-03, KpiRow): four columns, two when narrow. */
.bau-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.bau-kpi--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bau-kpi--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bau-kpi__item { display: flex; flex-direction: column; min-width: 0; }
.bau-kpi__value { font-size: var(--t-figure); line-height: 1.1; color: var(--text-primary); }
.bau-kpi__value.bau-neg { color: var(--corum-dark); }
.bau-kpi__label { margin-top: var(--s-3); font-size: var(--t-micro); color: var(--text-secondary); }
.bau-kpi__label::before { content: ""; display: block; width: 58px; height: 2px; margin-bottom: var(--s-2); background: var(--rule-brand); }
@container bau (width < 720px) {
  .score-bar, .bau-scale { width: 96px; }
  .score-bar--p1::after, .score-bar--n1::after { width: 16px; }
  .score-bar--p2::after, .score-bar--n2::after { width: 32px; }
  .score-bar--p3::after, .score-bar--n3::after { width: 48px; }
  /* The reference universe as the second line under the class. */
  .bau--score tr { display: grid; grid-template-columns: minmax(0, 1fr) 96px 3rem; align-items: center; }
  .bau--score tr > :nth-child(2):not(:last-child) { grid-column: 1; grid-row: 2; }
  .bau--score th:nth-child(2) { display: none; }
  .bau--score td[colspan] { grid-column: 1 / -1; }
  .bau--score .bau-second { font-size: var(--t-micro); color: var(--text-secondary); }
  /* Dates: the third column as the second line under the event. */
  .bau--dates tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); }
  .bau--dates tr > :nth-child(3) { grid-column: 2; font-size: var(--t-micro); color: var(--text-secondary); border-bottom: 0; }
  /* Rates, market and allocation scroll in their frame, the label stands. */
  .bau--rates td:first-child, .bau--market td:first-child, .bau--allocation td:first-child,
  .bau--rates th:first-child, .bau--market th:first-child, .bau--allocation th:first-child {
    position: sticky; left: 0; background: var(--surface-page); }
  .bau-kpi, .bau-kpi--c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}

/* Allocation widths in per cent of the bar area (generated). */
.alloc-bar__fill.w-0 { width: 0%; } .alloc-bar__fill.w-1 { width: 1%; } .alloc-bar__fill.w-2 { width: 2%; } .alloc-bar__fill.w-3 { width: 3%; } .alloc-bar__fill.w-4 { width: 4%; } .alloc-bar__fill.w-5 { width: 5%; } .alloc-bar__fill.w-6 { width: 6%; } .alloc-bar__fill.w-7 { width: 7%; } .alloc-bar__fill.w-8 { width: 8%; } .alloc-bar__fill.w-9 { width: 9%; } .alloc-bar__fill.w-10 { width: 10%; } .alloc-bar__fill.w-11 { width: 11%; } .alloc-bar__fill.w-12 { width: 12%; } .alloc-bar__fill.w-13 { width: 13%; } .alloc-bar__fill.w-14 { width: 14%; } .alloc-bar__fill.w-15 { width: 15%; } .alloc-bar__fill.w-16 { width: 16%; } .alloc-bar__fill.w-17 { width: 17%; } .alloc-bar__fill.w-18 { width: 18%; } .alloc-bar__fill.w-19 { width: 19%; } .alloc-bar__fill.w-20 { width: 20%; } .alloc-bar__fill.w-21 { width: 21%; } .alloc-bar__fill.w-22 { width: 22%; } .alloc-bar__fill.w-23 { width: 23%; } .alloc-bar__fill.w-24 { width: 24%; } .alloc-bar__fill.w-25 { width: 25%; } .alloc-bar__fill.w-26 { width: 26%; } .alloc-bar__fill.w-27 { width: 27%; } .alloc-bar__fill.w-28 { width: 28%; } .alloc-bar__fill.w-29 { width: 29%; } .alloc-bar__fill.w-30 { width: 30%; } .alloc-bar__fill.w-31 { width: 31%; } .alloc-bar__fill.w-32 { width: 32%; } .alloc-bar__fill.w-33 { width: 33%; } .alloc-bar__fill.w-34 { width: 34%; } .alloc-bar__fill.w-35 { width: 35%; } .alloc-bar__fill.w-36 { width: 36%; } .alloc-bar__fill.w-37 { width: 37%; } .alloc-bar__fill.w-38 { width: 38%; } .alloc-bar__fill.w-39 { width: 39%; } .alloc-bar__fill.w-40 { width: 40%; } .alloc-bar__fill.w-41 { width: 41%; } .alloc-bar__fill.w-42 { width: 42%; } .alloc-bar__fill.w-43 { width: 43%; } .alloc-bar__fill.w-44 { width: 44%; } .alloc-bar__fill.w-45 { width: 45%; } .alloc-bar__fill.w-46 { width: 46%; } .alloc-bar__fill.w-47 { width: 47%; } .alloc-bar__fill.w-48 { width: 48%; } .alloc-bar__fill.w-49 { width: 49%; } .alloc-bar__fill.w-50 { width: 50%; } .alloc-bar__fill.w-51 { width: 51%; } .alloc-bar__fill.w-52 { width: 52%; } .alloc-bar__fill.w-53 { width: 53%; } .alloc-bar__fill.w-54 { width: 54%; } .alloc-bar__fill.w-55 { width: 55%; } .alloc-bar__fill.w-56 { width: 56%; } .alloc-bar__fill.w-57 { width: 57%; } .alloc-bar__fill.w-58 { width: 58%; } .alloc-bar__fill.w-59 { width: 59%; } .alloc-bar__fill.w-60 { width: 60%; } .alloc-bar__fill.w-61 { width: 61%; } .alloc-bar__fill.w-62 { width: 62%; } .alloc-bar__fill.w-63 { width: 63%; } .alloc-bar__fill.w-64 { width: 64%; } .alloc-bar__fill.w-65 { width: 65%; } .alloc-bar__fill.w-66 { width: 66%; } .alloc-bar__fill.w-67 { width: 67%; } .alloc-bar__fill.w-68 { width: 68%; } .alloc-bar__fill.w-69 { width: 69%; } .alloc-bar__fill.w-70 { width: 70%; } .alloc-bar__fill.w-71 { width: 71%; } .alloc-bar__fill.w-72 { width: 72%; } .alloc-bar__fill.w-73 { width: 73%; } .alloc-bar__fill.w-74 { width: 74%; } .alloc-bar__fill.w-75 { width: 75%; } .alloc-bar__fill.w-76 { width: 76%; } .alloc-bar__fill.w-77 { width: 77%; } .alloc-bar__fill.w-78 { width: 78%; } .alloc-bar__fill.w-79 { width: 79%; } .alloc-bar__fill.w-80 { width: 80%; } .alloc-bar__fill.w-81 { width: 81%; } .alloc-bar__fill.w-82 { width: 82%; } .alloc-bar__fill.w-83 { width: 83%; } .alloc-bar__fill.w-84 { width: 84%; } .alloc-bar__fill.w-85 { width: 85%; } .alloc-bar__fill.w-86 { width: 86%; } .alloc-bar__fill.w-87 { width: 87%; } .alloc-bar__fill.w-88 { width: 88%; } .alloc-bar__fill.w-89 { width: 89%; } .alloc-bar__fill.w-90 { width: 90%; } .alloc-bar__fill.w-91 { width: 91%; } .alloc-bar__fill.w-92 { width: 92%; } .alloc-bar__fill.w-93 { width: 93%; } .alloc-bar__fill.w-94 { width: 94%; } .alloc-bar__fill.w-95 { width: 95%; } .alloc-bar__fill.w-96 { width: 96%; } .alloc-bar__fill.w-97 { width: 97%; } .alloc-bar__fill.w-98 { width: 98%; } .alloc-bar__fill.w-99 { width: 99%; } .alloc-bar__fill.w-100 { width: 100%; }
.alloc-bar__mark.m-0 { left: 0%; } .alloc-bar__mark.m-1 { left: 1%; } .alloc-bar__mark.m-2 { left: 2%; } .alloc-bar__mark.m-3 { left: 3%; } .alloc-bar__mark.m-4 { left: 4%; } .alloc-bar__mark.m-5 { left: 5%; } .alloc-bar__mark.m-6 { left: 6%; } .alloc-bar__mark.m-7 { left: 7%; } .alloc-bar__mark.m-8 { left: 8%; } .alloc-bar__mark.m-9 { left: 9%; } .alloc-bar__mark.m-10 { left: 10%; } .alloc-bar__mark.m-11 { left: 11%; } .alloc-bar__mark.m-12 { left: 12%; } .alloc-bar__mark.m-13 { left: 13%; } .alloc-bar__mark.m-14 { left: 14%; } .alloc-bar__mark.m-15 { left: 15%; } .alloc-bar__mark.m-16 { left: 16%; } .alloc-bar__mark.m-17 { left: 17%; } .alloc-bar__mark.m-18 { left: 18%; } .alloc-bar__mark.m-19 { left: 19%; } .alloc-bar__mark.m-20 { left: 20%; } .alloc-bar__mark.m-21 { left: 21%; } .alloc-bar__mark.m-22 { left: 22%; } .alloc-bar__mark.m-23 { left: 23%; } .alloc-bar__mark.m-24 { left: 24%; } .alloc-bar__mark.m-25 { left: 25%; } .alloc-bar__mark.m-26 { left: 26%; } .alloc-bar__mark.m-27 { left: 27%; } .alloc-bar__mark.m-28 { left: 28%; } .alloc-bar__mark.m-29 { left: 29%; } .alloc-bar__mark.m-30 { left: 30%; } .alloc-bar__mark.m-31 { left: 31%; } .alloc-bar__mark.m-32 { left: 32%; } .alloc-bar__mark.m-33 { left: 33%; } .alloc-bar__mark.m-34 { left: 34%; } .alloc-bar__mark.m-35 { left: 35%; } .alloc-bar__mark.m-36 { left: 36%; } .alloc-bar__mark.m-37 { left: 37%; } .alloc-bar__mark.m-38 { left: 38%; } .alloc-bar__mark.m-39 { left: 39%; } .alloc-bar__mark.m-40 { left: 40%; } .alloc-bar__mark.m-41 { left: 41%; } .alloc-bar__mark.m-42 { left: 42%; } .alloc-bar__mark.m-43 { left: 43%; } .alloc-bar__mark.m-44 { left: 44%; } .alloc-bar__mark.m-45 { left: 45%; } .alloc-bar__mark.m-46 { left: 46%; } .alloc-bar__mark.m-47 { left: 47%; } .alloc-bar__mark.m-48 { left: 48%; } .alloc-bar__mark.m-49 { left: 49%; } .alloc-bar__mark.m-50 { left: 50%; } .alloc-bar__mark.m-51 { left: 51%; } .alloc-bar__mark.m-52 { left: 52%; } .alloc-bar__mark.m-53 { left: 53%; } .alloc-bar__mark.m-54 { left: 54%; } .alloc-bar__mark.m-55 { left: 55%; } .alloc-bar__mark.m-56 { left: 56%; } .alloc-bar__mark.m-57 { left: 57%; } .alloc-bar__mark.m-58 { left: 58%; } .alloc-bar__mark.m-59 { left: 59%; } .alloc-bar__mark.m-60 { left: 60%; } .alloc-bar__mark.m-61 { left: 61%; } .alloc-bar__mark.m-62 { left: 62%; } .alloc-bar__mark.m-63 { left: 63%; } .alloc-bar__mark.m-64 { left: 64%; } .alloc-bar__mark.m-65 { left: 65%; } .alloc-bar__mark.m-66 { left: 66%; } .alloc-bar__mark.m-67 { left: 67%; } .alloc-bar__mark.m-68 { left: 68%; } .alloc-bar__mark.m-69 { left: 69%; } .alloc-bar__mark.m-70 { left: 70%; } .alloc-bar__mark.m-71 { left: 71%; } .alloc-bar__mark.m-72 { left: 72%; } .alloc-bar__mark.m-73 { left: 73%; } .alloc-bar__mark.m-74 { left: 74%; } .alloc-bar__mark.m-75 { left: 75%; } .alloc-bar__mark.m-76 { left: 76%; } .alloc-bar__mark.m-77 { left: 77%; } .alloc-bar__mark.m-78 { left: 78%; } .alloc-bar__mark.m-79 { left: 79%; } .alloc-bar__mark.m-80 { left: 80%; } .alloc-bar__mark.m-81 { left: 81%; } .alloc-bar__mark.m-82 { left: 82%; } .alloc-bar__mark.m-83 { left: 83%; } .alloc-bar__mark.m-84 { left: 84%; } .alloc-bar__mark.m-85 { left: 85%; } .alloc-bar__mark.m-86 { left: 86%; } .alloc-bar__mark.m-87 { left: 87%; } .alloc-bar__mark.m-88 { left: 88%; } .alloc-bar__mark.m-89 { left: 89%; } .alloc-bar__mark.m-90 { left: 90%; } .alloc-bar__mark.m-91 { left: 91%; } .alloc-bar__mark.m-92 { left: 92%; } .alloc-bar__mark.m-93 { left: 93%; } .alloc-bar__mark.m-94 { left: 94%; } .alloc-bar__mark.m-95 { left: 95%; } .alloc-bar__mark.m-96 { left: 96%; } .alloc-bar__mark.m-97 { left: 97%; } .alloc-bar__mark.m-98 { left: 98%; } .alloc-bar__mark.m-99 { left: 99%; } .alloc-bar__mark.m-100 { left: 100%; }
}  /* @layer ui */