/* ---------------------------------------------------------- dossier head
 * templates/ui/dossier_head.html. The one head of the product, security
 * and Monthly pages (owner brief B, Etappe 3): breadcrumb, kicker, the name
 * in the display role with the Haarlinie under it and the figure (price,
 * NAV) at the right, the identifiers in micro with the context chips at
 * the right; the switches under it as labelled segments. Then the tabs.
 * The head scrolls with the page - one head for all dossiers, none sticky. */
@layer ui {
.dossier-head { margin: 0 0 var(--s-6); }
.dossier-head__kicker { display: block; margin-bottom: var(--s-3); font-size: var(--t-micro); color: var(--text-secondary); }
.dossier-head__main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4) var(--s-6); }
.dossier-head__name { flex: 1 1 24rem; min-width: 0; margin: 0; font-size: var(--t-display); max-width: 28ch;
  overflow-wrap: anywhere; }
/* The Haarlinie (WEB-GRU-04, web.hairline.title): under the title, on the text margin. */
.dossier-head__name::after { content: ""; display: block; width: 134px; height: 2px; margin-top: var(--s-4);
  background: var(--rule-brand); }
/* prf-ignore PRF-WEB-11: Bildmass des Emittentenlogos wie die Logohöhen der Allowlist, kein Abstand */
.dossier-head__logo { width: 40px; height: 40px; margin-right: var(--s-3); vertical-align: middle; object-fit: contain; }
.dossier-head__figure { flex: none; margin: 0 0 calc(var(--s-4) + 2px); text-align: right; max-width: none; }
.dossier-head__value { display: block; font-size: var(--t-figure); line-height: 1.1; color: var(--text-primary);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dossier-head__meta { display: block; margin-top: var(--s-2); font-size: var(--t-small); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; }
.dossier-head__meta > span + span::before { content: "\00a0\00a0·\00a0\00a0"; color: var(--text-secondary); }
.dossier-head__sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-2) var(--s-5); margin-top: var(--s-4); }
.dossier-head__ids { margin: 0; font-size: var(--t-micro); color: var(--text-secondary); max-width: none; }
.dossier-head__ids > span + span::before { content: "\00a0\00a0·\00a0\00a0"; }
.dossier-head__chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.dossier-head__chips a, .dossier-head__chips li > span { display: inline-block; padding: .2em var(--s-2);
  font-size: var(--t-micro); color: var(--slate); background: var(--surface-subtle); border: 1px solid var(--rule-faint); }
.dossier-head__chips a:hover { color: var(--text-primary); border-color: var(--steel); }
.dossier-head__chipvalue { color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* The switches: labelled segments in one row under the head. */
.dossier-head__switches { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4) var(--s-6);
  margin-top: var(--s-5); }

/* A figure's change: ink with its sign for a rise, corum-dark for a fall
   (WEB-ZUS-04, ENT-420) - never a mandate colour as a traffic
   light. Portal-wide: tables, heads, key figures. */
.is-up { color: var(--ink); }
.is-down { color: var(--corum-dark); }
/* A negative change value in a table cell keeps the sign colour over the
   table's own cell colour (DAT-FSE-11, MAR-ROT-05; services/sign_color.py). */
td.is-down, .hv-facts td.is-down, .hv-table--grid tbody td.is-down,
.hv-table--grid tr.is-change td.is-down, .hv-table--grid tr.is-sub td.is-down { color: var(--corum-dark); }

/* The dossier's panels: tab content at the full shell width. A tab's
   content switches at once, without a fade (WEB-BEW pattern 04, WEB-BEW-06:
   no opacity; keyframes only corum-hairline and corum-progress). */
.dossier-panel { min-width: 0; }
.dossier-panel[hidden] { display: none; }
.dossier-lead { max-width: var(--measure); margin: 0 0 var(--gap-topic); font-size: var(--t-body); color: var(--text-secondary);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.dossier-downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-4); margin: 0 0 var(--gap-topic); }
/* Blocks side by side: the full width or two halves (WEB-LAY-11). */
.dossier-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap);
  row-gap: var(--gap-topic); align-items: start; margin: 0 0 var(--gap-topic); }
.dossier-halves > .block, .dossier-halves > .chart-frame { margin-bottom: 0; }

.block__lead { max-width: var(--measure); margin: calc(-1 * var(--s-2)) 0 var(--s-4); font-size: var(--t-small);
  color: var(--text-secondary); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.u-spaced-topic { margin-top: var(--gap-topic); }
/* Wide analysis tables scroll sideways inside their block, never the page;
   the widths below are the least a table needs to stay legible. */
.dossier-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.dossier-table--wide { min-width: 52rem; }
.dossier-table--mid { min-width: 38rem; }
.dossier-table--narrow { min-width: 30rem; }
/* Monthly returns: the year's figure set off by space, never by a vertical
   rule or by weight (WEB-TAB-07, WEB-TAB-15; 1.5rem is open point 2). */
.monthly-returns .monthly-returns__year { padding-left: calc(var(--s-3) + var(--s-5)); }
/* Plus in ink with «+», minus in corum-dark with U+2212, zero in ink
   (WEB-TAB-15, WEB-ZUS-04). */
.monthly-returns td { color: var(--text-primary); }
/* A row head is the row's name: Light, left, ink - like a first cell.
   Data tables are dense (WEB-TAB-14). */
.dossier-scroll tbody th[scope="row"] { font-weight: 300; text-align: left; color: var(--text-primary);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule-fine); vertical-align: top; }
/* The closing rule runs under the row head too (WEB-TAB-06). */
.dossier-scroll tbody tr:last-child > th[scope="row"],
.dossier-scroll tbody tr:nth-last-child(1 of :not([hidden])) > th[scope="row"] { border-bottom-color: var(--rule-strong); }
/* Heads Light like everything (owner brief A); hierarchy by size and rule. */
.dossier-panel thead th { font-weight: 300; color: var(--text-secondary); }

/* The Monthly dossier's bars take their length as data (--w), their side
   from a class: no position in the markup. */
.bars__fill { left: 0; width: var(--w, 0); }
.bars--diverging .bars__fill { left: 50%; }
.bars--diverging .bars__fill--minus { left: auto; right: 50%; }
.scorebars__fill { width: var(--w, 0); }
.scorebars__fill--plus { left: 50%; }
.scorebars__fill--minus { right: 50%; }
.regime__zone { flex: none; width: var(--w, auto); }
.bars__value.is-down { color: var(--corum-dark); }
/* The month's letter inside its fold. */
.reading--fold { margin-top: var(--s-5); }
/* Rebalancings (Transaktionen tab): one fold per day, adjacent folds share
   one rule; the cash balance is a total row, set off by the head rule and
   never by weight (WEB-TAB-07). */
.rebalancing + .rebalancing { border-top: 0; }
/* A fold is as wide as its block: the wide table scrolls in its frame,
   never the page (WEB-TAB-12). */
.rebalancing { grid-template-columns: minmax(0, 1fr); }
.rebalancing > * { min-width: 0; }
.rebalancing .dossier-scroll { margin-top: var(--s-3); }
.rebalancing__total > th, .rebalancing__total > td { border-top: 1px solid var(--rule-medium); }
/* «Alle zuklappen / aufklappen» over the ten folds, right, like the
   financials' title line. */
.rebalancing__bar { display: flex; justify-content: flex-end; margin-bottom: var(--s-2); }
/* The bar scale labelled at its ends and at the zero line, which sits in
   the middle (DAT-BAL-06, DAT-DIA-05); the value stands in its fixed zone
   right of the bars (DAT-BAL-04). */
.rebalancing__table .data-bars__plot { min-width: 10rem; }
.rebalancing__axis > span:not(:empty) { display: inline-block; width: calc(100% / 3); }
.rebalancing__axis > span:nth-child(1) { text-align: left; }
.rebalancing__axis > span:nth-child(2) { text-align: center; }
.rebalancing__axis > span:nth-child(3) { text-align: right; }
.rebalancing__value { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .dossier-head__main { flex-direction: column; align-items: stretch; }
  .dossier-head__name { flex-basis: auto; }
  .dossier-head__figure { width: 100%; margin: 0; text-align: left; }
  .dossier-head__switches { gap: var(--s-4); }
  /* A switch wraps as a whole on the phone, never past the page edge. */
  .dossier-head__switches .ctl { max-width: 100%; }
  /* A switch that does not fit becomes a select (static/js/controls.js);
     without script it scrolls in itself, never the page. */
  .dossier-head__switches .seg { overflow-x: auto; }
  .dossier-halves { grid-template-columns: minmax(0, 1fr); }
}
}  /* @layer ui */