/* Porthexis web prototype. Light and quiet ("Weißraum"), the Iris as the one big picture.
   Tokens first; no inline styles anywhere (strict CSP), so bar widths and hover states are classes. */
:root {
  color-scheme: light;
  --page: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --fill: #eceef2;
  --ink: #15171c;
  --ink-2: #4b5059;
  --muted: #6b7079;
  --line: #e9ebef;
  --line-strong: #d6d9df;
  --equity: #2f6fe0;
  --debt: #d97c1f;
  --property: #0e9aa7;
  --equity-soft: rgba(47, 111, 224, 0.45);
  --debt-soft: rgba(217, 124, 31, 0.48);
  --equity-wash: rgba(47, 111, 224, 0.08);
  --debt-wash: rgba(217, 124, 31, 0.11);
  --track: #eceef2;
  --good: #1f9d55;
  --good-ink: #157a41;
  --warning: #f2a52a;
  --warning-ink: #8a5a00;
  --critical: #d64545;
  --info: #8a8f99;
  --focus: #2f6fe0;
  --btn-hover: #2b2f38;
  --nav-bg: rgba(255, 255, 255, 0.82);
  --panel-border: transparent;
  --shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 10px 30px rgba(17, 24, 39, 0.05);
  --menu-shadow: 0 14px 40px rgba(17, 24, 39, 0.16);
  --iris-glow: #edf2fb;
  /* donuts: a colour per name, the book's own colour first (docs/GESTALTUNG.md, computed and checked 30.10.2026) */
  --dn-lead-de: #d97c1f; --dn-lead-eq: #2f6fe0; --dn-teal: #00ae9d; --dn-violet: #8d87de; --dn-magenta: #a65385;
  --dn-olive: #6c7400; --dn-sky: #017dcb; --dn-bronze: #c97706;
  /* ratings have an order: one hue per book, evenly stepped in OKLCH, the worst darkest (checked 29.10.2026) */
  --dn-eq0: #003081; --dn-eq1: #0c4ebc; --dn-eq2: #3272e4; --dn-eq3: #5c97fe; --dn-eq4: #94bbfe; --dn-eq5: #c5dafe;
  --dn-de0: #552c01; --dn-de1: #834602; --dn-de2: #b26101; --dn-de3: #dc7f24; --dn-de4: #ffa151; --dn-de5: #ffcea9;
  --dn-all0: #333841; --dn-all1: #535861; --dn-all2: #747983; --dn-all3: #949aa4; --dn-all4: #b5bbc5; --dn-all5: #d3d9e4;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --radius: 22px;
  --radius-s: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0b0f15; --surface: #141922; --surface-2: #1a202b; --fill: #232a36; --ink: #eef1f5; --ink-2: #b4bcc8;
    --muted: #8d97a5; --line: #232b37; --line-strong: #344050; --equity: #5b95f5; --debt: #eda04a;
    --property: #35c0cc; --equity-soft: rgba(91, 149, 245, 0.5); --debt-soft: rgba(237, 160, 74, 0.5); --equity-wash: rgba(91, 149, 245, 0.12);
    --debt-wash: rgba(237, 160, 74, 0.13); --track: #232a36; --good: #2fb36a; --good-ink: #4cc583; --warning: #f2b33d;
    --warning-ink: #f2c26b; --critical: #ef6464; --info: #6f7987; --focus: #7fb2ff; --btn-hover: #d9dee6;
    --nav-bg: rgba(20, 25, 34, 0.82); --panel-border: #222a35; --shadow: none; --menu-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    --iris-glow: #16264a;
    --dn-lead-de: #d08023; --dn-lead-eq: #7188fe; --dn-teal: #00afa4; --dn-violet: #8754cc; --dn-magenta: #af4c83;
    --dn-olive: #877400; --dn-sky: #248acb; --dn-bronze: #cf7d4b;
    --dn-eq0: #ccdffe; --dn-eq1: #98bffe; --dn-eq2: #609afa; --dn-eq3: #4179d6; --dn-eq4: #2259b3; --dn-eq5: #013b92;
    --dn-de0: #ffd6ad; --dn-de1: #f9ab56; --dn-de2: #d3882e; --dn-de3: #af6901; --dn-de4: #854f02; --dn-de5: #603801;
    --dn-all0: #d6dfeb; --dn-all1: #b6becb; --dn-all2: #949ca8; --dn-all3: #757c88; --dn-all4: #575e69; --dn-all5: #3c434d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b0f15; --surface: #141922; --surface-2: #1a202b; --fill: #232a36; --ink: #eef1f5; --ink-2: #b4bcc8;
  --muted: #8d97a5; --line: #232b37; --line-strong: #344050; --equity: #5b95f5; --debt: #eda04a;
  --property: #35c0cc; --equity-soft: rgba(91, 149, 245, 0.5); --debt-soft: rgba(237, 160, 74, 0.5); --equity-wash: rgba(91, 149, 245, 0.12);
  --debt-wash: rgba(237, 160, 74, 0.13); --track: #232a36; --good: #2fb36a; --good-ink: #4cc583; --warning: #f2b33d;
  --warning-ink: #f2c26b; --critical: #ef6464; --info: #6f7987; --focus: #7fb2ff; --btn-hover: #d9dee6;
  --nav-bg: rgba(20, 25, 34, 0.82); --panel-border: #222a35; --shadow: none; --menu-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  --iris-glow: #16264a;
  --dn-lead-de: #d08023; --dn-lead-eq: #7188fe; --dn-teal: #00afa4; --dn-violet: #8754cc; --dn-magenta: #af4c83;
  --dn-olive: #877400; --dn-sky: #248acb; --dn-bronze: #cf7d4b;
  --dn-eq0: #ccdffe; --dn-eq1: #98bffe; --dn-eq2: #609afa; --dn-eq3: #4179d6; --dn-eq4: #2259b3; --dn-eq5: #013b92;
  --dn-de0: #ffd6ad; --dn-de1: #f9ab56; --dn-de2: #d3882e; --dn-de3: #af6901; --dn-de4: #854f02; --dn-de5: #603801;
  --dn-all0: #d6dfeb; --dn-all1: #b6becb; --dn-all2: #949ca8; --dn-all3: #757c88; --dn-all4: #575e69; --dn-all5: #3c434d;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--equity); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); margin: 0; }
h1 { font-size: 34px; line-height: 1.12; font-weight: 600; letter-spacing: -0.022em; text-wrap: balance;
     overflow-wrap: anywhere; }                 /* a long file name as the title must not widen a phone page */
h2 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; }
h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0; }
.num, td.n, th.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.lead { color: var(--ink-2); font-size: 16px; max-width: 64ch; margin-top: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-16 { margin-top: 16px; } .mt-8 { margin-top: 8px; } .mb-14 { margin-bottom: 14px; }

/* Brand */
.logo { display: block; flex: none; color: var(--ink); }
.mark { display: block; flex: none; color: var(--ink); }
.mk-eq { stroke: var(--equity); }
.mk-de { stroke: var(--debt); }
.mk-ink { stroke: currentColor; }
.lg-ink { fill: currentColor; }
.lg-eq { fill: var(--equity); }
.lg-de { fill: var(--debt); }

/* Navigation: one floating pill */
.top { position: sticky; top: 0; z-index: 30; padding: 14px 16px 0; }
/* jump targets (#oeffentlich, #suche, #daten, table rows) stop below the sticky navigation */
[id] { scroll-margin-top: 104px; }
@media (max-width: 700px) { [id] { scroll-margin-top: 132px; } }
.pill { max-width: 1124px; margin: 0 auto; display: flex; align-items: center; gap: 6px; min-height: 54px; padding: 0 8px 0 18px;
  background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--line); border-radius: 27px; box-shadow: var(--shadow); }
.pill .brand { display: flex; align-items: center; margin-right: 16px; flex: none; color: var(--ink); border-radius: 8px; }
.pill .brand:hover { text-decoration: none; }
.links { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.links::-webkit-scrollbar { display: none; }
.links a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 17px; color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.links a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.links a[aria-current="page"] { color: var(--ink); background: var(--fill); font-weight: 500; }
.count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.me { position: relative; flex: none; margin-left: 6px; }
.me summary { list-style: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; user-select: none; }
.me summary::-webkit-details-marker { display: none; }
.me[open] summary { box-shadow: 0 0 0 4px var(--fill); }
.menu { position: absolute; right: 0; top: calc(100% + 12px); width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
  box-shadow: var(--menu-shadow); padding: 16px; z-index: 40; }
.menu .who { display: block; font-weight: 600; overflow-wrap: anywhere; }
.menu .role, .menu .tenant { display: block; color: var(--muted); font-size: 13px; }
.menu .tenant { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-2); }
.menu form { margin: 14px 0 0; }
.menu .btn { width: 100%; justify-content: center; }
.demo-band { text-align: center; margin: 12px 16px 0; }
.demo-band span { display: inline-block; font-size: 12.5px; color: var(--ink-2); background: var(--debt-wash); border-radius: 999px; padding: 4px 14px; }

main { max-width: 1180px; margin: 0 auto; padding: 38px 28px 64px; }
main > * + * { margin-top: 44px; }
main > .page-head + *, main > .flash + *, main > .error-box + * { margin-top: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.meta { color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
.meta a { color: var(--muted); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 4px 12px; }
.section-head p { color: var(--muted); font-size: 13.5px; }
.panel { background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel.table-wrap { padding: 4px 6px; }
.panel-pad { padding: 24px 26px; }
.flash { background: var(--equity-wash); color: var(--ink); border-radius: 14px; padding: 12px 16px; margin-bottom: 24px; }
.error-box { background: rgba(214, 69, 69, 0.09); color: var(--ink); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.grid-2 > section + section { margin-top: 0; }
@media (max-width: 920px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } .grid-2 > section + section { margin-top: 36px; } }

/* Buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 18px; border-radius: 19px; border: 0;
  font: 500 14px var(--sans); cursor: pointer; text-decoration: none; background: var(--ink); color: var(--surface); }
.btn:hover { background: var(--btn-hover); text-decoration: none; }
.btn.secondary { background: var(--fill); color: var(--ink); }
.btn.secondary:hover { background: var(--line-strong); }
.btn.small { min-height: 30px; padding: 0 13px; font-size: 13px; border-radius: 15px; }
:root a.btn, :root a.btn:hover { color: var(--surface); }
:root a.btn.secondary, :root a.btn.secondary:hover { color: var(--ink); }
form.inline { display: inline; margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field.check label { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 400; color: var(--ink); }
.field.check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }
.field .hint { font-size: 12px; color: var(--muted); }
.error-box p { margin: 0; }
.error-box .msg-action { margin-top: 10px; }
.msg-code { display: block; margin: 6px 0 0; font-size: 11px; letter-spacing: .03em; color: var(--muted); }
fieldset.field { border: 0; padding: 0; min-width: 0; }
.role-pick select { min-width: 150px; max-width: 200px; }
.roles-matrix th.c, .roles-matrix td.c { text-align: center; min-width: 96px; }
.roles-matrix tbody th { font-weight: 400; min-width: 240px; }
.roles-matrix input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }
dialog#idle-warning { border: 0; border-radius: 18px; padding: 24px; max-width: min(420px, calc(100vw - 32px)); background: var(--surface, #fff); color: var(--ink); }
dialog#idle-warning::backdrop { background: rgba(8, 12, 18, .55); }
dialog#idle-warning h2 { margin: 0 0 8px; }
fieldset.field legend { font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 0; margin-bottom: 6px; }
.invests-in .radio { display: inline-flex; gap: 8px; align-items: center; margin-right: 18px; font-size: 14px; color: var(--ink); }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, input[type=file], textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 9px 12px; width: 100%; min-height: 42px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--equity-wash); }
input[type=file] { padding: 7px 8px; color: var(--ink-2); }
input[type=file]::file-selector-button { border: 0; background: var(--fill); color: var(--ink); border-radius: 10px; padding: 6px 14px; margin-right: 12px; font: 500 13.5px var(--sans); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--line-strong); }
td.name-cell { min-width: 220px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: 12.5px; color: var(--muted); font-weight: 500; white-space: nowrap; padding-top: 14px; padding-bottom: 10px; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th[scope="row"] { font-size: 14px; color: var(--ink); white-space: normal; padding-top: 12px; padding-bottom: 12px; }
tbody tr:hover td { background: var(--surface-2); }
td a { color: var(--ink); font-weight: 500; }
td a:hover { color: var(--equity); }
.sub, td .sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; font-weight: 400; }
tr:target td { background: var(--equity-wash); }
.snippet { display: block; color: var(--muted); font-size: 12px; max-width: 46ch; overflow-wrap: anywhere; margin-top: 2px; }

/* Tags, keys, status */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 22px; padding: 0 10px; border-radius: 11px; color: var(--ink-2); background: var(--fill); white-space: nowrap; }
.tag + .tag { margin-left: 4px; }
.key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.key.eq { background: var(--equity); }
.key.de { background: var(--debt); }
.key.re { background: var(--property); }
.re-stats { margin-top: 14px; }
.re-bar { height: 10px; min-width: 120px; background: var(--fill); border-radius: 5px; overflow: hidden; }
.re-bar div { height: 100%; background: var(--property); border-radius: 5px; }
.re-switch { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.re-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--ink-2); }
.re-legend li { display: inline-flex; align-items: center; gap: 6px; }
.re-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.re-stack { display: flex; height: 12px; min-width: 140px; gap: 2px; }
.re-stack span { display: block; height: 100%; border-radius: 3px; }
.re-cov { font-size: 13px; line-height: 1.55; white-space: nowrap; }
.re-roles { margin: 12px 0 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dn-row .dn-amount { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.key.s1 { opacity: 0.6; } .key.s2 { opacity: 0.8; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.panel-pad > .status, p > .status { white-space: normal; }
.status svg { flex: none; }
.status.good { color: var(--good-ink); }
.status.warning { color: var(--warning-ink); }
.status.critical { color: var(--critical); }
.status.info { color: var(--ink-2); }
.ico-warning { fill: var(--warning); }
.ico-good { fill: var(--good); }
.ico-critical { fill: var(--critical); }
.ico-info { fill: var(--info); }
.ico-mark { stroke: var(--surface); }

/* Key figures */
.stats { display: flex; flex-wrap: wrap; row-gap: 14px; margin-top: 28px; }
.stat { padding: 0 24px; border-left: 1px solid var(--line-strong); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat b { display: block; font: 600 27px/1.15 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat b small { font-size: 15px; font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.stat span { font-size: 13px; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { padding: 18px 22px; border-left: 1px solid var(--line); }
.kpi:first-child { border-left: 0; }
.kpi .label { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.kpi .value { font: 600 24px/1.25 var(--display); letter-spacing: -0.015em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-left: 3px; letter-spacing: 0; }
@media (max-width: 920px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { border-left: 0; border-top: 1px solid var(--line); } .kpi:nth-child(-n+2) { border-top: 0; } .kpi:nth-child(even) { border-left: 1px solid var(--line); } }

/* Inset list with icon tiles ("Zu klären") */
.list-title { font: 500 13px var(--sans); color: var(--muted); margin: 36px 0 8px 16px; letter-spacing: 0; }
.ilist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-s); box-shadow: var(--shadow); overflow: hidden; }
.ilist li { position: relative; }
.ilist li + li::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; border-top: 1px solid var(--line); }
.ilist .row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 12px; gap: 14px; align-items: center; padding: 12px 16px; color: var(--ink); }
.ilist a.row:hover { background: var(--surface-2); text-decoration: none; }
.ilist .row > span:nth-child(2) { min-width: 0; }
.ilist .row b, .ilist .row .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ilist .row b { font-weight: 500; font-size: 15px; line-height: 1.35; }
.ilist .row .t { font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 1px; }
.chev { color: var(--line-strong); }
.tile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; }
.tile.count { background: var(--ink); color: var(--surface); }
.tile.warning { background: var(--debt); }
.tile.info { background: var(--info); }
.tile.good { background: var(--good); }

/* Hero of the overview */
.dash > * + * { margin-top: 44px; }
.hero { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: 48px; align-items: start; }
.hero h1 { font-size: 46px; line-height: 1.06; letter-spacing: -0.028em; margin-top: 4px; }
.hero .lead { font-size: 17px; }
.hero .actions { margin-top: 26px; }
@media (max-width: 1080px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* The Iris */
.iris-panel { padding: 22px 22px 20px; }
.iris-panel .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 0 4px; }
.iris-panel .panel-head p { color: var(--muted); font-size: 13px; }
.iris { display: block; width: 100%; height: auto; margin: 6px auto 0; max-width: 640px; }
.ir-glow-0 { stop-color: var(--iris-glow); }
.ir-glow-1 { stop-color: var(--surface); stop-opacity: 0; }
.ir-ticks { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.ir-inner { fill: none; stroke: var(--line); stroke-width: 1; }
.ir-s-eq { stop-color: var(--equity); }
.ir-s-de { stop-color: var(--debt); }
.ir-ribbons path { stroke: var(--surface); stroke-width: 0.8; }
.ir-ribbons .co { opacity: 0.34; transition: opacity 0.15s ease; }
.ir-ribbons .co.sel { opacity: 0.92; }
.ir-ribbons:hover .co { opacity: 0.12; }
.ir-ribbons .co:hover, .ir-ribbons .co:focus-visible { opacity: 0.95; outline: none; }
.ir-arc { fill: none; }
.ir-arc.pe { stroke: var(--equity); }
.ir-arc.pd { stroke: var(--debt); }
.ir-arc.re { stroke: var(--property); }
.ir-tn { fill: var(--property); fill-opacity: 0.55; }
.ir-tenants a:hover .ir-tn { fill-opacity: 0.9; }
.ir-arc.s1 { stroke-opacity: 0.6; }
.ir-arc.s2 { stroke-opacity: 0.8; }
.ir-fl { font: 500 13.5px var(--sans); fill: var(--ink); }
.ir-fv { font: 400 12.5px var(--sans); fill: var(--muted); font-variant-numeric: tabular-nums; }
.ir-side { font: 600 10.5px var(--sans); fill: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.ir-leader { stroke: var(--line-strong); fill: none; }
.ir-funds { display: none; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.ir-funds ul { list-style: none; margin: 0; padding: 0; }
.ir-funds li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 4px; }
.ir-funds-cap { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 0 4px 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ir-cards { display: grid; margin-top: 10px; }
.ir-card { grid-area: 1 / 1; visibility: hidden; background: var(--surface-2); border-radius: var(--radius-s); padding: 14px 16px; }
.ir-card.sel { visibility: visible; }
.ir-card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ir-card h3 { font-size: 16px; }
.ir-card .head a { font-size: 13px; white-space: nowrap; }
.ir-card .sub { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.ir-line { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; margin-top: 9px; font-size: 13.5px; color: var(--ink-2); }
.ir-line b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ir-flag { display: flex; gap: 8px; align-items: flex-start; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--warning-ink); }
.ir-flag svg { flex: none; margin-top: 2px; }
.ir-empty { color: var(--muted); font-size: 13.5px; padding: 6px 4px; }
@media (max-width: 700px) {
  .ir-labels { display: none; }
  .ir-funds { display: block; }
  .iris-panel { padding: 18px 14px 16px; }
  /* without labels the ring can fill the width: enlarge the picture and crop the empty label margins */
  .ir-frame { position: relative; overflow: hidden; aspect-ratio: 1 / 1; margin-top: 6px; }
  .ir-frame .iris { position: absolute; width: 180%; max-width: none; left: -40%; top: -20%; margin: 0; }
}

/* Small Iris without labels (company page): ring cropped to a square, funds listed below */
.iris-small .ir-labels { display: none; }
.iris-small .ir-funds { display: block; }
.iris-small .ir-frame { position: relative; overflow: hidden; aspect-ratio: 1 / 1; max-width: 360px; margin: 8px auto 0; }
.iris-small .ir-frame .iris { position: absolute; width: 180%; max-width: none; left: -40%; top: -20%; margin: 0; }

/* Equity and debt per company: dots on either side of one axis */
.db-legend { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); padding: 0 22px; }
.db-legend span { display: inline-flex; align-items: center; gap: 7px; }
.db-axis, .db-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 20px; align-items: center; padding: 0 22px; }
.db-axis { padding-top: 16px; padding-bottom: 4px; font-size: 12px; color: var(--muted); }
.db-axis .db-chart span:first-child { text-align: right; padding-right: 12px; }
.db-axis .db-chart span:last-child { padding-left: 12px; }
.db-row { position: relative; padding-top: 13px; padding-bottom: 13px; color: var(--ink); }
a.db-row:hover { background: var(--surface-2); text-decoration: none; }
.db-row + .db-row::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; border-top: 1px solid var(--line); }
.db-name { min-width: 0; font-weight: 500; font-size: 15px; line-height: 1.3; }
.db-name .sub { margin-top: 2px; }
.db-chart { display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; }
.db-half { display: flex; align-items: center; min-width: 0; min-height: 26px; }
.db-half.l { justify-content: flex-end; padding-left: 3.6em; border-right: 1px solid var(--line-strong); }
.db-half.r { padding-right: 3.6em; }
.db-bar { position: relative; height: 2px; flex: none; }
.db-half.l .db-bar { background: var(--equity-soft); }
.db-half.r .db-bar { background: var(--debt-soft); }
.db-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--surface); }
.db-half.l .db-dot { left: 0; background: var(--equity); }
.db-half.r .db-dot { left: 100%; background: var(--debt); }
.db-val { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-half.l .db-val { right: calc(100% + 12px); }
.db-half.r .db-val { left: calc(100% + 12px); }
.db-panel { padding: 22px 0 8px; }
.db-panel .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; padding: 0 22px 12px; }
.db-panel .panel-head p { color: var(--muted); font-size: 13px; }
@media (max-width: 700px) {
  .db-axis { display: none; }
  .db-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-left: 16px; padding-right: 16px; }
  .db-row + .db-row::before { left: 16px; right: 16px; }
  .db-legend { padding: 0 16px; }
  .db-panel .panel-head { padding: 0 16px 12px; }
}

/* Two-sided bars (sectors): equity grows left of the name, debt right */
.bf-legend { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin: 0 0 14px; }
.bf-legend span { display: inline-flex; align-items: center; gap: 7px; }
.bf-axis, .bf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 200px) minmax(0, 1fr); align-items: center; column-gap: 14px; }
.bf-axis { font-size: 12px; color: var(--muted); padding: 0 8px 6px; border-bottom: 1px solid var(--line); }
.bf-axis .l { text-align: right; }
.bf-axis .c { text-align: center; }
.bf-row { position: relative; padding: 10px 8px; color: var(--ink); border-bottom: 1px solid var(--line); }
.bf-row:last-child { border-bottom: 0; }
a.bf-row:hover, a.bf-row:focus-visible { background: var(--surface-2); text-decoration: none; }
:root a.bf-row, :root a.bf-row:hover { color: var(--ink); }
.bf-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bf-side.l { flex-direction: row-reverse; }
.bf-area { flex: 1; display: flex; align-items: center; min-width: 0; }
.bf-side.l .bf-area { justify-content: flex-end; padding-left: 3.8em; }
.bf-side.r .bf-area { justify-content: flex-start; padding-right: 3.8em; }
.bar { position: relative; height: 12px; flex: none; }
.bar.eq { background: var(--equity); border-radius: 6px 0 0 6px; }
.bar.de { background: var(--debt); border-radius: 0 6px 6px 0; }
.bar.bw-0 { width: 0; }
.bar .bf-val { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; min-width: 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar.eq .bf-val { right: 100%; margin-right: 6px; }
.bar.de .bf-val { left: 100%; margin-left: 6px; }
.bf-name { text-align: center; font-weight: 500; font-size: 14px; line-height: 1.25; }
.bf-name .sub { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
@media (max-width: 640px) {
  .bf-axis { display: none; }
  .bf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; }
  .bf-name { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .bf-side.l { grid-row: 2; grid-column: 1; }
  .bf-side.r { grid-row: 2; grid-column: 2; }
}

/* Stacked two-tone bar and meter */
.stack { display: flex; gap: 2px; height: 8px; min-width: 2px; margin-top: 6px; }
.seg { height: 8px; flex: 0 1 auto; }
.seg.eq { background: var(--equity); border-radius: 4px 0 0 4px; }
.seg.de { background: var(--debt); }
.seg.end { border-radius: 0 4px 4px 0; }
.seg.eq.end { border-radius: 4px; }
td.barcell { width: 30%; min-width: 130px; vertical-align: middle; }
.meter { position: relative; height: 6px; background: var(--track); border-radius: 3px; min-width: 90px; }
.meter > div { height: 6px; background: var(--ink-2); border-radius: 3px; }
.meter.low > div { background: var(--warning); }
.meter-cell .meter { margin-top: 6px; }

/* Simple lists inside panels */
.todo { list-style: none; margin: 0; padding: 0; }
.todo > li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 14px 20px; position: relative; }
.todo > li + li::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; border-top: 1px solid var(--line); }
.todo svg { margin-top: 3px; }
.todo a, .todo strong { font-weight: 500; }
.todo p { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }

/* Review */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px 20px; align-items: start; padding: 22px 24px; }
.pair + .pair { border-top: 1px solid var(--line); }
.pair > div:not(.vs):not(.pair-foot) { background: var(--surface-2); border-radius: 14px; padding: 14px 16px; }
.pair .vs { color: var(--muted); font-size: 13px; padding-top: 18px; text-align: center; }
.pair .name { font-weight: 600; font-size: 15px; }
.pair dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin: 10px 0 0; font-size: 13px; }
.pair dt { color: var(--muted); }
.pair dd { margin: 0; }
.pair-foot { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.reasons { color: var(--ink-2); font-size: 13px; }
@media (max-width: 640px) { .pair { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; } .pair .vs { text-align: left; padding: 0; } }

/* Company page */
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: 14px; margin-top: 10px; }
.facts b { color: var(--ink); font-weight: 500; }
.ladder { list-style: none; margin: 0; padding: 0; }
.ladder li { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 20px; position: relative; }
.ladder li + li::before { content: ""; position: absolute; top: 0; left: 40px; right: 0; border-top: 1px solid var(--line); }
.ladder .key { height: 30px; width: 6px; border-radius: 3px; }
.ladder li.ladder-apart::before { border-top-style: dashed; }   /* a tenant: beside the capital structure, not a rank in it */

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; background: var(--page); }
.login { width: 100%; max-width: 410px; background: var(--surface); border: 1px solid var(--panel-border); border-radius: 26px; padding: 34px 32px 28px; box-shadow: var(--shadow); }
.login .brand { display: flex; justify-content: center; margin-bottom: 26px; color: var(--ink); }
.login h1 { font-size: 26px; text-align: center; }
.login .lead { margin: 6px auto 24px; font-size: 14.5px; text-align: center; }
.login .btn { width: 100%; min-height: 44px; border-radius: 22px; font-size: 15px; margin-top: 4px; }
.demo-login { margin-top: 18px; padding: 12px 14px; background: var(--debt-wash); border-radius: 14px; font-size: 13px; }
.demo-login code { font-size: 13px; }
.login-foot { color: var(--muted); font-size: 12.5px; margin: 16px auto 0; text-align: center; max-width: 380px; }

.footer { max-width: 1180px; margin: 0 auto; padding: 0 32px 36px; color: var(--muted); font-size: 12px; }
.empty { padding: 34px 32px; }
.empty-todo { margin-bottom: 20px; }
.empty ol { margin: 14px 0 0; padding-left: 20px; color: var(--ink-2); }
.empty li + li { margin-top: 6px; }
.secret { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; padding: 10px 12px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 12px; display: inline-block; }
/* QR code for the authenticator app (S1): dark modules on white with the quiet zone in the code itself, also in the dark theme, otherwise many apps do not read it */
.qr-box { margin: 4px 0 16px; }
.qr { display: block; width: 232px; max-width: 100%; height: auto; border-radius: 8px; }
.qr .qr-light { fill: #ffffff; }
.qr .qr-dark { fill: #000000; }
.qr-box figcaption { margin-top: 8px; font-weight: 600; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 24px; padding-left: 28px; margin: 16px 0; }
.recovery-codes code { font-size: 16px; letter-spacing: 0.04em; }

@media (max-width: 700px) {
  .top { padding: 10px 10px 0; }
  .pill { flex-wrap: wrap; padding: 8px 8px 6px 14px; border-radius: 22px; row-gap: 4px; }
  .pill .brand { margin-right: auto; }
  .links { order: 3; flex: 1 0 100%; margin: 0 -2px; }
  main { padding: 26px 16px 56px; }
  main > * + * { margin-top: 36px; }
  h1 { font-size: 28px; }
  .hero h1 { font-size: 34px; }
  .panel-pad { padding: 18px; }
  .stat { padding: 0 16px; }
  .stat b { font-size: 22px; }
  .footer { padding: 0 18px 30px; }
  .login { padding: 28px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Analysis page */
.an-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 22px; }
.an-head .meta { margin: 0; }
.an-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.an-tools .filters { margin-bottom: 0; }
.segctl { display: inline-flex; background: var(--fill); border-radius: 12px; padding: 3px; gap: 2px; }
.segctl a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.segctl a:hover { text-decoration: none; color: var(--ink); }
.segctl a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08); }
@media (max-width: 520px) {
  /* four tabs do not fit next to each other on a phone: two by two, full width */
  .segctl { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .segctl a { justify-content: center; }
}
.an-hero h1 { font-size: 40px; line-height: 1.08; letter-spacing: -0.026em; max-width: 30ch; }
.an-hero .lead { font-size: 16.5px; }
.an-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .an-grid { grid-template-columns: minmax(0, 1fr); } }
.chart-panel, .crowd-panel { padding: 22px 22px 18px; }
.chart-panel .panel-head, .crowd-panel .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.chart-panel .panel-head p, .crowd-panel .panel-head p { color: var(--muted); font-size: 13px; }
.sc { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.sc-grid { stroke: var(--line); stroke-width: 1; }
.sc-grid.v { stroke-dasharray: 2 4; }
.sc-axis { stroke: var(--line-strong); stroke-width: 1; }
.sc-tick { font: 400 11.5px var(--sans); fill: var(--muted); font-variant-numeric: tabular-nums; }
.sc-axis-label { font: 500 11.5px var(--sans); fill: var(--muted); }
.sc-shade { fill: var(--debt-wash); }
.sc-line { stroke: var(--debt); stroke-width: 1.5; stroke-dasharray: 6 4; fill: none; }
.sc-ref { stroke: var(--equity); stroke-width: 1.5; stroke-dasharray: 6 4; }
.sc-line-label { font: 500 11.5px var(--sans); fill: var(--ink-2); }
.pt { stroke: var(--surface); stroke-width: 1.5; transition: fill-opacity 0.12s ease; }
.pt.sen { fill: var(--debt); fill-opacity: 0.9; }
.pt.uni { fill: var(--debt); fill-opacity: 0.5; }
.pt.mez { fill: var(--debt); fill-opacity: 0.18; stroke: var(--debt); stroke-width: 1.4; }
.pt.oth { fill: var(--muted); fill-opacity: 0.5; }
.pt.eq { fill: var(--equity); fill-opacity: 0.65; }
.pt.watch { stroke: var(--ink); stroke-width: 2; }
.pt.sec-de { fill: var(--debt); fill-opacity: 0.55; stroke: var(--debt); stroke-width: 1.5; }
.pt.sec-eq { fill: var(--equity); fill-opacity: 0.55; stroke: var(--equity); stroke-width: 1.5; }
.sc-trail { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.sc-trail.sec-de { stroke: var(--debt); }
.sc-trail.sec-eq { stroke: var(--equity); }
.sc-dot { stroke: var(--surface); stroke-width: 1; }
.sc-dot.sec-de { fill: var(--debt); fill-opacity: 0.6; }
.sc-dot.sec-eq { fill: var(--equity); fill-opacity: 0.6; }
.lg.trail { width: 18px; height: 0; border-top: 2px solid var(--ink-2); border-radius: 0; opacity: 0.6; vertical-align: 3px; }
.lg.sec-de { background: var(--debt); opacity: 0.7; }
.lg.sec-eq { background: var(--equity); opacity: 0.7; }
.sc-points a:hover .pt, .sc-points a:focus-visible .pt { fill-opacity: 1; stroke: var(--ink); stroke-width: 2; outline: none; }
.sc-label { font: 500 11.5px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.lg.sen { background: var(--debt); }
.lg.uni { background: var(--debt); opacity: 0.5; }
.lg.mez { border: 1.5px solid var(--debt); }
.lg.eq { background: var(--equity); opacity: 0.65; }
.lg.ring { border: 2px solid var(--ink); }
.lg.line { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed var(--debt); }
.lg.ref { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed var(--equity); }
.note { font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.crowd-score { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.crowd-score b { font: 600 54px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.crowd-score span { color: var(--muted); font-size: 14px; }
.crowd-score.lvl-high b { color: var(--critical); }
.crowd-score.lvl-medium b { color: var(--warning-ink); }
.crowd-score.lvl-low b { color: var(--good-ink); }
.gauge { position: relative; display: flex; height: 8px; margin: 14px 0 6px; }
.gauge span { display: block; height: 8px; }
.g-low { flex: 4; background: rgba(31, 157, 85, 0.35); border-radius: 4px 0 0 4px; }
.g-mid { flex: 2; background: rgba(242, 165, 42, 0.5); }
.g-high { flex: 4; background: rgba(214, 69, 69, 0.45); border-radius: 0 4px 4px 0; }
.gauge i { position: absolute; top: -5px; width: 4px; height: 18px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); box-shadow: 0 0 0 2px var(--surface); }
.comp { list-style: none; margin: 14px 0 0; padding: 0; }
.comp li { display: grid; grid-template-columns: minmax(0, 1fr) 84px 26px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.comp b { display: block; font-weight: 500; font-size: 14px; }
.comp small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.comp-bar { display: block; height: 6px; background: var(--track); border-radius: 3px; }
.comp-bar i { display: block; height: 6px; border-radius: 3px; background: var(--ink-2); }
.how { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.how summary { cursor: pointer; color: var(--equity); }
.how p { margin-top: 6px; }
.trend td { vertical-align: middle; }
.tcell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tcell b { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 3.4em; }
.spark { display: block; flex: none; }
.spark path { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark.de path { stroke: var(--debt); }
.spark.de circle { fill: var(--debt); }
.spark.eq path { stroke: var(--equity); }
.spark.eq circle { fill: var(--equity); }
.delta { font-size: 12px; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 6px; }
.delta.good { color: var(--good-ink); background: rgba(31, 157, 85, 0.1); }
.delta.bad { color: var(--critical); background: rgba(214, 69, 69, 0.09); }
.delta.flat { color: var(--muted); }
.score { display: inline-block; min-width: 2.4em; text-align: center; padding: 2px 8px; border-radius: 8px; font-weight: 600; font-size: 13px; }
.score.lvl-high { background: rgba(214, 69, 69, 0.12); color: var(--critical); }
.score.lvl-medium { background: rgba(242, 165, 42, 0.16); color: var(--warning-ink); }
.score.lvl-low { background: rgba(31, 157, 85, 0.12); color: var(--good-ink); }
.buckets { list-style: none; margin: 0; padding: 0; }
.buckets li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px 22px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.bk { display: block; height: 10px; background: var(--track); border-radius: 5px; }
.bk i { display: block; height: 10px; border-radius: 5px; background: var(--ink-2); }
.buckets li.low .bk i { background: var(--critical); }
table.compact th, table.compact td { padding: 7px 10px; }
.wl { list-style: none; margin: 0; padding: 0; }
.wl > li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; padding: 14px 20px; position: relative; }
.wl > li + li::before { content: ""; position: absolute; top: 0; left: 44px; right: 0; border-top: 1px solid var(--line); }
.wl a { font-weight: 500; color: var(--ink); }
.sev { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.sev.s0 { background: var(--line-strong); }
.sev.s1 { background: var(--warning); }
.sev.s2 { background: var(--critical); }
.sev-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 12px 2px; font-size: 12.5px; color: var(--muted); }
.sev-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sev-legend .sev { margin-top: 0; width: 8px; height: 8px; }
.todo > li.with-action { grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; }
.todo > li.with-action > form { margin: 0; }
.todo > li > .sev { margin-top: 5px; justify-self: center; }
.todo > li .chips { margin-top: 6px; }
.todo > li.watch-add .row-form { margin: 0; }
.todo > li.watch-add .row-form .field { flex: 1 1 320px; max-width: 520px; }
.todo > li.watch-add .row-form input[type="text"] { width: 100%; }
.kpi-line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.kpi-line b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 12px; line-height: 1.35; padding: 3px 9px; border-radius: 9px; background: var(--fill); color: var(--ink-2); }
.chips li.more { background: transparent; color: var(--muted); padding-left: 2px; }
.chips li.breach { background: rgba(214, 69, 69, 0.09); color: var(--critical); }
.chips li.near { background: rgba(242, 165, 42, 0.16); color: var(--warning-ink); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filters a { padding: 6px 13px; border-radius: 16px; background: var(--surface); color: var(--ink-2); font-size: 13.5px; box-shadow: var(--shadow); border: 1px solid var(--panel-border); }
.filters a:hover { text-decoration: none; color: var(--ink); }
.filters a span { opacity: 0.65; margin-left: 2px; }
:root .filters a[aria-current="page"], :root .filters a[aria-current="page"]:hover { background: var(--ink); color: var(--surface); }
table.watch td.kv span { display: block; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
table.watch td.kv b { color: var(--ink); font-weight: 500; }
table.watch td { vertical-align: middle; }
.moves { list-style: none; margin: 10px 0 0; padding: 0; }
.moves li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.moves li a { color: var(--ink); font-weight: 500; }
.moves li .sub { grid-column: 1; }
.moves li .num { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.row-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.row-form .field { margin-bottom: 0; min-width: 240px; }
.limit-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px 30px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 600; font-size: 14px; margin-bottom: 10px; padding: 0; }
.field.inline-field { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.inline-field label { font-weight: 400; color: var(--ink-2); font-size: 13.5px; }
.unit-input { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.unit-input input { width: 90px; text-align: right; min-height: 36px; padding: 6px 10px; }
.unit-input span { width: 3.6em; font-size: 13px; color: var(--muted); }
.radio { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; font-size: 14px; }
table.bench input.cell { width: 74px; min-height: 32px; padding: 4px 8px; text-align: right; border-radius: 8px; }
table.bench td, table.bench th { padding: 6px 8px; }
pre.sample { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 12px; overflow-x: auto; margin: 10px 0 0; }
@media (max-width: 700px) {
  .an-hero h1 { font-size: 30px; }
  .crowd-score b { font-size: 44px; }
  .chart-panel, .crowd-panel { padding: 18px 14px 16px; }
  /* on a phone the chart keeps a readable size and scrolls sideways */
  .sc-scroll { overflow-x: auto; margin: 0 -14px; padding: 0 14px; -webkit-overflow-scrolling: touch; }
  .sc-scroll .sc { min-width: 600px; }
  /* full-width charts (1040 units): a little wider, and larger text so it stays readable when scaled down */
  .sc-scroll .sc.wide { min-width: 760px; }
  .sc.wide .sc-tick, .sc.wide .sc-axis-label, .sc.wide .sc-line-label, .sc.wide .sc-label, .sc.wide .fl-label { font-size: 15px; }
}

/* Documents read by the AI */
.ai-box { margin-bottom: 24px; }
.ai-box h2 { font-size: 19px; margin-bottom: 6px; }
.ai-box p { color: var(--ink-2); max-width: 82ch; }
.ai-box p + p { margin-top: 8px; }
:root .ai-box.review { border: 1px solid rgba(242, 165, 42, 0.6); }
.ai-head { display: flex; gap: 14px; align-items: flex-start; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--fill); border-top-color: var(--equity); animation: spin 0.9s linear infinite; flex: none; margin-top: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 4s; } }
.review-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.review-actions form { margin: 0; }
.note-box { background: var(--surface-2); border-radius: 12px; padding: 10px 14px; margin-top: 10px; }
.conf { font-size: 12px; padding: 3px 9px; border-radius: 9px; white-space: nowrap; }
.conf.hi { background: rgba(31, 157, 85, 0.12); color: var(--good-ink); }
.conf.mid { background: rgba(242, 165, 42, 0.16); color: var(--warning-ink); }
.conf.lo { background: rgba(214, 69, 69, 0.12); color: var(--critical); }
tbody.dropped td { opacity: 0.5; }
table.holdings.ai tbody.pos tr:first-child td { border-bottom: 0; padding-bottom: 6px; }
table.holdings.ai tbody.pos tr.quote-row td { padding-top: 0; }
table.holdings.ai tbody.pos:not(:last-child) tr:last-child td { border-bottom: 1px solid var(--line); }
table.holdings.ai tbody tr:hover td { background: transparent; }
table.holdings.ai tbody.pos:hover td { background: var(--surface-2); }
.quote { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); background: var(--surface-2); border-radius: 10px; padding: 8px 12px; max-width: 110ch; }
table.holdings.ai tbody.pos:hover .quote { background: var(--fill); }
table.holdings.ai tr:first-child td:last-child { white-space: nowrap; }
@media (max-width: 700px) {
  /* on a phone every position is a card: values under the name, the evidence below */
  table.holdings.ai, table.holdings.ai tbody, table.holdings.ai tr, table.holdings.ai td { display: block; width: auto; }
  table.holdings.ai thead { display: none; }
  table.holdings.ai tbody.pos { position: relative; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
  table.holdings.ai tbody.pos:last-child { border-bottom: 0; }
  table.holdings.ai td, table.holdings.ai tbody.pos:not(:last-child) tr:last-child td { border-bottom: 0; padding: 3px 16px; text-align: left; }
  table.holdings.ai td.pick { position: absolute; top: 12px; right: 4px; padding: 0 12px; }
  table.holdings.ai tr:first-child td:nth-child(2) { padding-right: 52px; }
  table.holdings.ai td[data-label]::before { content: attr(data-label) "  "; color: var(--muted); font-size: 12.5px; }
  table.holdings.ai tr:first-child td:last-child { white-space: normal; color: var(--muted); font-size: 12.5px; }
  table.holdings.ai tr.quote-row td { padding-top: 6px; }
}
.inline-form { display: inline; margin-left: 8px; }
/* Questions on a reporting date of an uploaded file */
.decide-box { margin-bottom: 16px; }
.decide-box .row-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.decide-box .row-form .field { margin-bottom: 0; min-width: 200px; }
.decide-box .radio input { accent-color: var(--ink); }
#periods { margin-bottom: 24px; }
#periods tr[aria-current="true"] td { background: var(--surface-2); }
details.how form.row-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px; }
details.how form.row-form .field { margin-bottom: 0; min-width: 220px; }
.page-head .actions form { display: inline; margin: 0; }
table.holdings .kpi-line { margin-top: 0; font-size: 12.5px; gap: 2px 12px; }
table.holdings td:first-child input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }

/* Analysis teaser on the overview */
.teasers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1080px) { .teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .teasers { grid-template-columns: minmax(0, 1fr); } }
.teaser { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; transition: transform 0.15s ease, background 0.15s ease; }
:root a.teaser, :root a.teaser:hover { color: var(--ink); text-decoration: none; }
a.teaser:hover { background: var(--surface-2); }
.teaser .t-label { font-size: 13px; color: var(--muted); }
.teaser .t-value { font-family: var(--display); font-size: 34px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.teaser .t-value small { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.teaser .t-value.lvl-high { color: var(--critical); }
.teaser .t-value.lvl-medium { color: var(--warning-ink); }
.teaser .t-value.lvl-low { color: var(--good-ink); }
.teaser .t-note { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.teaser .t-sev { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.teaser .t-sev > span { display: inline-flex; align-items: center; gap: 6px; }
.teaser .t-sev .sev { margin-top: 0; width: 8px; height: 8px; }
.teaser .gauge { margin: 6px 0 4px; }

/* Width steps for bars (strict CSP forbids inline style attributes) */
.bw-0{width:0%}
.bw-1{width:1%}
.bw-2{width:2%}
.bw-3{width:3%}
.bw-4{width:4%}
.bw-5{width:5%}
.bw-6{width:6%}
.bw-7{width:7%}
.bw-8{width:8%}
.bw-9{width:9%}
.bw-10{width:10%}
.bw-11{width:11%}
.bw-12{width:12%}
.bw-13{width:13%}
.bw-14{width:14%}
.bw-15{width:15%}
.bw-16{width:16%}
.bw-17{width:17%}
.bw-18{width:18%}
.bw-19{width:19%}
.bw-20{width:20%}
.bw-21{width:21%}
.bw-22{width:22%}
.bw-23{width:23%}
.bw-24{width:24%}
.bw-25{width:25%}
.bw-26{width:26%}
.bw-27{width:27%}
.bw-28{width:28%}
.bw-29{width:29%}
.bw-30{width:30%}
.bw-31{width:31%}
.bw-32{width:32%}
.bw-33{width:33%}
.bw-34{width:34%}
.bw-35{width:35%}
.bw-36{width:36%}
.bw-37{width:37%}
.bw-38{width:38%}
.bw-39{width:39%}
.bw-40{width:40%}
.bw-41{width:41%}
.bw-42{width:42%}
.bw-43{width:43%}
.bw-44{width:44%}
.bw-45{width:45%}
.bw-46{width:46%}
.bw-47{width:47%}
.bw-48{width:48%}
.bw-49{width:49%}
.bw-50{width:50%}
.bw-51{width:51%}
.bw-52{width:52%}
.bw-53{width:53%}
.bw-54{width:54%}
.bw-55{width:55%}
.bw-56{width:56%}
.bw-57{width:57%}
.bw-58{width:58%}
.bw-59{width:59%}
.bw-60{width:60%}
.bw-61{width:61%}
.bw-62{width:62%}
.bw-63{width:63%}
.bw-64{width:64%}
.bw-65{width:65%}
.bw-66{width:66%}
.bw-67{width:67%}
.bw-68{width:68%}
.bw-69{width:69%}
.bw-70{width:70%}
.bw-71{width:71%}
.bw-72{width:72%}
.bw-73{width:73%}
.bw-74{width:74%}
.bw-75{width:75%}
.bw-76{width:76%}
.bw-77{width:77%}
.bw-78{width:78%}
.bw-79{width:79%}
.bw-80{width:80%}
.bw-81{width:81%}
.bw-82{width:82%}
.bw-83{width:83%}
.bw-84{width:84%}
.bw-85{width:85%}
.bw-86{width:86%}
.bw-87{width:87%}
.bw-88{width:88%}
.bw-89{width:89%}
.bw-90{width:90%}
.bw-91{width:91%}
.bw-92{width:92%}
.bw-93{width:93%}
.bw-94{width:94%}
.bw-95{width:95%}
.bw-96{width:96%}
.bw-97{width:97%}
.bw-98{width:98%}
.bw-99{width:99%}
.bw-100{width:100%}

/* Hover coupling: Iris bands, the company card and the rows below. Generated for the first 40 companies. */
.iris-panel:has(.co:hover) .ir-card.sel, .iris-panel:has(.co:focus-visible) .ir-card.sel,
.dash:has(.db-row:hover) .ir-card.sel, .dash:has(.db-row:focus-visible) .ir-card.sel { visibility: hidden; }
.dash:has(.db-row:hover) .ir-ribbons .co, .dash:has(.db-row:focus-visible) .ir-ribbons .co { opacity: 0.12; }
.iris-panel:has(.co[data-k="0"]:hover) .ir-card[data-k="0"], .iris-panel:has(.co[data-k="0"]:focus-visible) .ir-card[data-k="0"], .dash:has(.db-row[data-k="0"]:hover) .ir-card[data-k="0"], .dash:has(.db-row[data-k="0"]:focus-visible) .ir-card[data-k="0"] { visibility: visible; }
.dash:has(.db-row[data-k="0"]:hover) .co[data-k="0"], .dash:has(.db-row[data-k="0"]:focus-visible) .co[data-k="0"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="1"]:hover) .ir-card[data-k="1"], .iris-panel:has(.co[data-k="1"]:focus-visible) .ir-card[data-k="1"], .dash:has(.db-row[data-k="1"]:hover) .ir-card[data-k="1"], .dash:has(.db-row[data-k="1"]:focus-visible) .ir-card[data-k="1"] { visibility: visible; }
.dash:has(.db-row[data-k="1"]:hover) .co[data-k="1"], .dash:has(.db-row[data-k="1"]:focus-visible) .co[data-k="1"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="2"]:hover) .ir-card[data-k="2"], .iris-panel:has(.co[data-k="2"]:focus-visible) .ir-card[data-k="2"], .dash:has(.db-row[data-k="2"]:hover) .ir-card[data-k="2"], .dash:has(.db-row[data-k="2"]:focus-visible) .ir-card[data-k="2"] { visibility: visible; }
.dash:has(.db-row[data-k="2"]:hover) .co[data-k="2"], .dash:has(.db-row[data-k="2"]:focus-visible) .co[data-k="2"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="3"]:hover) .ir-card[data-k="3"], .iris-panel:has(.co[data-k="3"]:focus-visible) .ir-card[data-k="3"], .dash:has(.db-row[data-k="3"]:hover) .ir-card[data-k="3"], .dash:has(.db-row[data-k="3"]:focus-visible) .ir-card[data-k="3"] { visibility: visible; }
.dash:has(.db-row[data-k="3"]:hover) .co[data-k="3"], .dash:has(.db-row[data-k="3"]:focus-visible) .co[data-k="3"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="4"]:hover) .ir-card[data-k="4"], .iris-panel:has(.co[data-k="4"]:focus-visible) .ir-card[data-k="4"], .dash:has(.db-row[data-k="4"]:hover) .ir-card[data-k="4"], .dash:has(.db-row[data-k="4"]:focus-visible) .ir-card[data-k="4"] { visibility: visible; }
.dash:has(.db-row[data-k="4"]:hover) .co[data-k="4"], .dash:has(.db-row[data-k="4"]:focus-visible) .co[data-k="4"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="5"]:hover) .ir-card[data-k="5"], .iris-panel:has(.co[data-k="5"]:focus-visible) .ir-card[data-k="5"], .dash:has(.db-row[data-k="5"]:hover) .ir-card[data-k="5"], .dash:has(.db-row[data-k="5"]:focus-visible) .ir-card[data-k="5"] { visibility: visible; }
.dash:has(.db-row[data-k="5"]:hover) .co[data-k="5"], .dash:has(.db-row[data-k="5"]:focus-visible) .co[data-k="5"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="6"]:hover) .ir-card[data-k="6"], .iris-panel:has(.co[data-k="6"]:focus-visible) .ir-card[data-k="6"], .dash:has(.db-row[data-k="6"]:hover) .ir-card[data-k="6"], .dash:has(.db-row[data-k="6"]:focus-visible) .ir-card[data-k="6"] { visibility: visible; }
.dash:has(.db-row[data-k="6"]:hover) .co[data-k="6"], .dash:has(.db-row[data-k="6"]:focus-visible) .co[data-k="6"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="7"]:hover) .ir-card[data-k="7"], .iris-panel:has(.co[data-k="7"]:focus-visible) .ir-card[data-k="7"], .dash:has(.db-row[data-k="7"]:hover) .ir-card[data-k="7"], .dash:has(.db-row[data-k="7"]:focus-visible) .ir-card[data-k="7"] { visibility: visible; }
.dash:has(.db-row[data-k="7"]:hover) .co[data-k="7"], .dash:has(.db-row[data-k="7"]:focus-visible) .co[data-k="7"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="8"]:hover) .ir-card[data-k="8"], .iris-panel:has(.co[data-k="8"]:focus-visible) .ir-card[data-k="8"], .dash:has(.db-row[data-k="8"]:hover) .ir-card[data-k="8"], .dash:has(.db-row[data-k="8"]:focus-visible) .ir-card[data-k="8"] { visibility: visible; }
.dash:has(.db-row[data-k="8"]:hover) .co[data-k="8"], .dash:has(.db-row[data-k="8"]:focus-visible) .co[data-k="8"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="9"]:hover) .ir-card[data-k="9"], .iris-panel:has(.co[data-k="9"]:focus-visible) .ir-card[data-k="9"], .dash:has(.db-row[data-k="9"]:hover) .ir-card[data-k="9"], .dash:has(.db-row[data-k="9"]:focus-visible) .ir-card[data-k="9"] { visibility: visible; }
.dash:has(.db-row[data-k="9"]:hover) .co[data-k="9"], .dash:has(.db-row[data-k="9"]:focus-visible) .co[data-k="9"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="10"]:hover) .ir-card[data-k="10"], .iris-panel:has(.co[data-k="10"]:focus-visible) .ir-card[data-k="10"], .dash:has(.db-row[data-k="10"]:hover) .ir-card[data-k="10"], .dash:has(.db-row[data-k="10"]:focus-visible) .ir-card[data-k="10"] { visibility: visible; }
.dash:has(.db-row[data-k="10"]:hover) .co[data-k="10"], .dash:has(.db-row[data-k="10"]:focus-visible) .co[data-k="10"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="11"]:hover) .ir-card[data-k="11"], .iris-panel:has(.co[data-k="11"]:focus-visible) .ir-card[data-k="11"], .dash:has(.db-row[data-k="11"]:hover) .ir-card[data-k="11"], .dash:has(.db-row[data-k="11"]:focus-visible) .ir-card[data-k="11"] { visibility: visible; }
.dash:has(.db-row[data-k="11"]:hover) .co[data-k="11"], .dash:has(.db-row[data-k="11"]:focus-visible) .co[data-k="11"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="12"]:hover) .ir-card[data-k="12"], .iris-panel:has(.co[data-k="12"]:focus-visible) .ir-card[data-k="12"], .dash:has(.db-row[data-k="12"]:hover) .ir-card[data-k="12"], .dash:has(.db-row[data-k="12"]:focus-visible) .ir-card[data-k="12"] { visibility: visible; }
.dash:has(.db-row[data-k="12"]:hover) .co[data-k="12"], .dash:has(.db-row[data-k="12"]:focus-visible) .co[data-k="12"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="13"]:hover) .ir-card[data-k="13"], .iris-panel:has(.co[data-k="13"]:focus-visible) .ir-card[data-k="13"], .dash:has(.db-row[data-k="13"]:hover) .ir-card[data-k="13"], .dash:has(.db-row[data-k="13"]:focus-visible) .ir-card[data-k="13"] { visibility: visible; }
.dash:has(.db-row[data-k="13"]:hover) .co[data-k="13"], .dash:has(.db-row[data-k="13"]:focus-visible) .co[data-k="13"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="14"]:hover) .ir-card[data-k="14"], .iris-panel:has(.co[data-k="14"]:focus-visible) .ir-card[data-k="14"], .dash:has(.db-row[data-k="14"]:hover) .ir-card[data-k="14"], .dash:has(.db-row[data-k="14"]:focus-visible) .ir-card[data-k="14"] { visibility: visible; }
.dash:has(.db-row[data-k="14"]:hover) .co[data-k="14"], .dash:has(.db-row[data-k="14"]:focus-visible) .co[data-k="14"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="15"]:hover) .ir-card[data-k="15"], .iris-panel:has(.co[data-k="15"]:focus-visible) .ir-card[data-k="15"], .dash:has(.db-row[data-k="15"]:hover) .ir-card[data-k="15"], .dash:has(.db-row[data-k="15"]:focus-visible) .ir-card[data-k="15"] { visibility: visible; }
.dash:has(.db-row[data-k="15"]:hover) .co[data-k="15"], .dash:has(.db-row[data-k="15"]:focus-visible) .co[data-k="15"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="16"]:hover) .ir-card[data-k="16"], .iris-panel:has(.co[data-k="16"]:focus-visible) .ir-card[data-k="16"], .dash:has(.db-row[data-k="16"]:hover) .ir-card[data-k="16"], .dash:has(.db-row[data-k="16"]:focus-visible) .ir-card[data-k="16"] { visibility: visible; }
.dash:has(.db-row[data-k="16"]:hover) .co[data-k="16"], .dash:has(.db-row[data-k="16"]:focus-visible) .co[data-k="16"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="17"]:hover) .ir-card[data-k="17"], .iris-panel:has(.co[data-k="17"]:focus-visible) .ir-card[data-k="17"], .dash:has(.db-row[data-k="17"]:hover) .ir-card[data-k="17"], .dash:has(.db-row[data-k="17"]:focus-visible) .ir-card[data-k="17"] { visibility: visible; }
.dash:has(.db-row[data-k="17"]:hover) .co[data-k="17"], .dash:has(.db-row[data-k="17"]:focus-visible) .co[data-k="17"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="18"]:hover) .ir-card[data-k="18"], .iris-panel:has(.co[data-k="18"]:focus-visible) .ir-card[data-k="18"], .dash:has(.db-row[data-k="18"]:hover) .ir-card[data-k="18"], .dash:has(.db-row[data-k="18"]:focus-visible) .ir-card[data-k="18"] { visibility: visible; }
.dash:has(.db-row[data-k="18"]:hover) .co[data-k="18"], .dash:has(.db-row[data-k="18"]:focus-visible) .co[data-k="18"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="19"]:hover) .ir-card[data-k="19"], .iris-panel:has(.co[data-k="19"]:focus-visible) .ir-card[data-k="19"], .dash:has(.db-row[data-k="19"]:hover) .ir-card[data-k="19"], .dash:has(.db-row[data-k="19"]:focus-visible) .ir-card[data-k="19"] { visibility: visible; }
.dash:has(.db-row[data-k="19"]:hover) .co[data-k="19"], .dash:has(.db-row[data-k="19"]:focus-visible) .co[data-k="19"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="20"]:hover) .ir-card[data-k="20"], .iris-panel:has(.co[data-k="20"]:focus-visible) .ir-card[data-k="20"], .dash:has(.db-row[data-k="20"]:hover) .ir-card[data-k="20"], .dash:has(.db-row[data-k="20"]:focus-visible) .ir-card[data-k="20"] { visibility: visible; }
.dash:has(.db-row[data-k="20"]:hover) .co[data-k="20"], .dash:has(.db-row[data-k="20"]:focus-visible) .co[data-k="20"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="21"]:hover) .ir-card[data-k="21"], .iris-panel:has(.co[data-k="21"]:focus-visible) .ir-card[data-k="21"], .dash:has(.db-row[data-k="21"]:hover) .ir-card[data-k="21"], .dash:has(.db-row[data-k="21"]:focus-visible) .ir-card[data-k="21"] { visibility: visible; }
.dash:has(.db-row[data-k="21"]:hover) .co[data-k="21"], .dash:has(.db-row[data-k="21"]:focus-visible) .co[data-k="21"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="22"]:hover) .ir-card[data-k="22"], .iris-panel:has(.co[data-k="22"]:focus-visible) .ir-card[data-k="22"], .dash:has(.db-row[data-k="22"]:hover) .ir-card[data-k="22"], .dash:has(.db-row[data-k="22"]:focus-visible) .ir-card[data-k="22"] { visibility: visible; }
.dash:has(.db-row[data-k="22"]:hover) .co[data-k="22"], .dash:has(.db-row[data-k="22"]:focus-visible) .co[data-k="22"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="23"]:hover) .ir-card[data-k="23"], .iris-panel:has(.co[data-k="23"]:focus-visible) .ir-card[data-k="23"], .dash:has(.db-row[data-k="23"]:hover) .ir-card[data-k="23"], .dash:has(.db-row[data-k="23"]:focus-visible) .ir-card[data-k="23"] { visibility: visible; }
.dash:has(.db-row[data-k="23"]:hover) .co[data-k="23"], .dash:has(.db-row[data-k="23"]:focus-visible) .co[data-k="23"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="24"]:hover) .ir-card[data-k="24"], .iris-panel:has(.co[data-k="24"]:focus-visible) .ir-card[data-k="24"], .dash:has(.db-row[data-k="24"]:hover) .ir-card[data-k="24"], .dash:has(.db-row[data-k="24"]:focus-visible) .ir-card[data-k="24"] { visibility: visible; }
.dash:has(.db-row[data-k="24"]:hover) .co[data-k="24"], .dash:has(.db-row[data-k="24"]:focus-visible) .co[data-k="24"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="25"]:hover) .ir-card[data-k="25"], .iris-panel:has(.co[data-k="25"]:focus-visible) .ir-card[data-k="25"], .dash:has(.db-row[data-k="25"]:hover) .ir-card[data-k="25"], .dash:has(.db-row[data-k="25"]:focus-visible) .ir-card[data-k="25"] { visibility: visible; }
.dash:has(.db-row[data-k="25"]:hover) .co[data-k="25"], .dash:has(.db-row[data-k="25"]:focus-visible) .co[data-k="25"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="26"]:hover) .ir-card[data-k="26"], .iris-panel:has(.co[data-k="26"]:focus-visible) .ir-card[data-k="26"], .dash:has(.db-row[data-k="26"]:hover) .ir-card[data-k="26"], .dash:has(.db-row[data-k="26"]:focus-visible) .ir-card[data-k="26"] { visibility: visible; }
.dash:has(.db-row[data-k="26"]:hover) .co[data-k="26"], .dash:has(.db-row[data-k="26"]:focus-visible) .co[data-k="26"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="27"]:hover) .ir-card[data-k="27"], .iris-panel:has(.co[data-k="27"]:focus-visible) .ir-card[data-k="27"], .dash:has(.db-row[data-k="27"]:hover) .ir-card[data-k="27"], .dash:has(.db-row[data-k="27"]:focus-visible) .ir-card[data-k="27"] { visibility: visible; }
.dash:has(.db-row[data-k="27"]:hover) .co[data-k="27"], .dash:has(.db-row[data-k="27"]:focus-visible) .co[data-k="27"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="28"]:hover) .ir-card[data-k="28"], .iris-panel:has(.co[data-k="28"]:focus-visible) .ir-card[data-k="28"], .dash:has(.db-row[data-k="28"]:hover) .ir-card[data-k="28"], .dash:has(.db-row[data-k="28"]:focus-visible) .ir-card[data-k="28"] { visibility: visible; }
.dash:has(.db-row[data-k="28"]:hover) .co[data-k="28"], .dash:has(.db-row[data-k="28"]:focus-visible) .co[data-k="28"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="29"]:hover) .ir-card[data-k="29"], .iris-panel:has(.co[data-k="29"]:focus-visible) .ir-card[data-k="29"], .dash:has(.db-row[data-k="29"]:hover) .ir-card[data-k="29"], .dash:has(.db-row[data-k="29"]:focus-visible) .ir-card[data-k="29"] { visibility: visible; }
.dash:has(.db-row[data-k="29"]:hover) .co[data-k="29"], .dash:has(.db-row[data-k="29"]:focus-visible) .co[data-k="29"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="30"]:hover) .ir-card[data-k="30"], .iris-panel:has(.co[data-k="30"]:focus-visible) .ir-card[data-k="30"], .dash:has(.db-row[data-k="30"]:hover) .ir-card[data-k="30"], .dash:has(.db-row[data-k="30"]:focus-visible) .ir-card[data-k="30"] { visibility: visible; }
.dash:has(.db-row[data-k="30"]:hover) .co[data-k="30"], .dash:has(.db-row[data-k="30"]:focus-visible) .co[data-k="30"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="31"]:hover) .ir-card[data-k="31"], .iris-panel:has(.co[data-k="31"]:focus-visible) .ir-card[data-k="31"], .dash:has(.db-row[data-k="31"]:hover) .ir-card[data-k="31"], .dash:has(.db-row[data-k="31"]:focus-visible) .ir-card[data-k="31"] { visibility: visible; }
.dash:has(.db-row[data-k="31"]:hover) .co[data-k="31"], .dash:has(.db-row[data-k="31"]:focus-visible) .co[data-k="31"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="32"]:hover) .ir-card[data-k="32"], .iris-panel:has(.co[data-k="32"]:focus-visible) .ir-card[data-k="32"], .dash:has(.db-row[data-k="32"]:hover) .ir-card[data-k="32"], .dash:has(.db-row[data-k="32"]:focus-visible) .ir-card[data-k="32"] { visibility: visible; }
.dash:has(.db-row[data-k="32"]:hover) .co[data-k="32"], .dash:has(.db-row[data-k="32"]:focus-visible) .co[data-k="32"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="33"]:hover) .ir-card[data-k="33"], .iris-panel:has(.co[data-k="33"]:focus-visible) .ir-card[data-k="33"], .dash:has(.db-row[data-k="33"]:hover) .ir-card[data-k="33"], .dash:has(.db-row[data-k="33"]:focus-visible) .ir-card[data-k="33"] { visibility: visible; }
.dash:has(.db-row[data-k="33"]:hover) .co[data-k="33"], .dash:has(.db-row[data-k="33"]:focus-visible) .co[data-k="33"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="34"]:hover) .ir-card[data-k="34"], .iris-panel:has(.co[data-k="34"]:focus-visible) .ir-card[data-k="34"], .dash:has(.db-row[data-k="34"]:hover) .ir-card[data-k="34"], .dash:has(.db-row[data-k="34"]:focus-visible) .ir-card[data-k="34"] { visibility: visible; }
.dash:has(.db-row[data-k="34"]:hover) .co[data-k="34"], .dash:has(.db-row[data-k="34"]:focus-visible) .co[data-k="34"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="35"]:hover) .ir-card[data-k="35"], .iris-panel:has(.co[data-k="35"]:focus-visible) .ir-card[data-k="35"], .dash:has(.db-row[data-k="35"]:hover) .ir-card[data-k="35"], .dash:has(.db-row[data-k="35"]:focus-visible) .ir-card[data-k="35"] { visibility: visible; }
.dash:has(.db-row[data-k="35"]:hover) .co[data-k="35"], .dash:has(.db-row[data-k="35"]:focus-visible) .co[data-k="35"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="36"]:hover) .ir-card[data-k="36"], .iris-panel:has(.co[data-k="36"]:focus-visible) .ir-card[data-k="36"], .dash:has(.db-row[data-k="36"]:hover) .ir-card[data-k="36"], .dash:has(.db-row[data-k="36"]:focus-visible) .ir-card[data-k="36"] { visibility: visible; }
.dash:has(.db-row[data-k="36"]:hover) .co[data-k="36"], .dash:has(.db-row[data-k="36"]:focus-visible) .co[data-k="36"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="37"]:hover) .ir-card[data-k="37"], .iris-panel:has(.co[data-k="37"]:focus-visible) .ir-card[data-k="37"], .dash:has(.db-row[data-k="37"]:hover) .ir-card[data-k="37"], .dash:has(.db-row[data-k="37"]:focus-visible) .ir-card[data-k="37"] { visibility: visible; }
.dash:has(.db-row[data-k="37"]:hover) .co[data-k="37"], .dash:has(.db-row[data-k="37"]:focus-visible) .co[data-k="37"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="38"]:hover) .ir-card[data-k="38"], .iris-panel:has(.co[data-k="38"]:focus-visible) .ir-card[data-k="38"], .dash:has(.db-row[data-k="38"]:hover) .ir-card[data-k="38"], .dash:has(.db-row[data-k="38"]:focus-visible) .ir-card[data-k="38"] { visibility: visible; }
.dash:has(.db-row[data-k="38"]:hover) .co[data-k="38"], .dash:has(.db-row[data-k="38"]:focus-visible) .co[data-k="38"] { opacity: 0.95; }
.iris-panel:has(.co[data-k="39"]:hover) .ir-card[data-k="39"], .iris-panel:has(.co[data-k="39"]:focus-visible) .ir-card[data-k="39"], .dash:has(.db-row[data-k="39"]:hover) .ir-card[data-k="39"], .dash:has(.db-row[data-k="39"]:focus-visible) .ir-card[data-k="39"] { visibility: visible; }
.dash:has(.db-row[data-k="39"]:hover) .co[data-k="39"], .dash:has(.db-row[data-k="39"]:focus-visible) .co[data-k="39"] { opacity: 0.95; }

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

/* Public data: who else holds a company (US BDCs) */
.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 28px; }
@media (max-width: 920px) { .kpis.kpis-3 { grid-template-columns: minmax(0, 1fr); } .kpis.kpis-3 .kpi { border-left: 0; } .kpis.kpis-3 .kpi + .kpi { border-top: 1px solid var(--line); } }
table.pub tbody.bdc tr.bdc-head td { background: var(--surface-2); border-bottom: 1px solid var(--line); padding-top: 12px; padding-bottom: 12px; }
table.pub tbody.bdc:not(:first-of-type) tr.bdc-head td { border-top: 1px solid var(--line-strong); }
table.pub tbody tr.bdc-head:hover td { background: var(--surface-2); }
.bdc-line { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.bdc-line .conf { margin-left: 6px; }
.bdc-line .sub { max-width: 90ch; }
.bdc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
td.pub-name { min-width: 260px; max-width: 48ch; overflow-wrap: anywhere; }
table.pub td .spark { margin-top: 2px; }
.pub-gaps { margin-bottom: 0; }
ul.plain { list-style: none; margin: 8px 0 0; padding: 0; }
ul.plain li { padding: 6px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
ul.plain li:first-child { border-top: 0; }
.search-form { margin-bottom: 0; }
.search-form .field { flex: 1 1 320px; max-width: 560px; }
table.market td .conf { display: inline-block; margin-top: 4px; }
p code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--fill); border-radius: 6px; padding: 1px 5px; }
@media (max-width: 700px) {
  /* on a phone every BDC position and every company is a card: the name, then the figures with labels */
  table.pub, table.pub tbody, table.pub tr, table.pub td, table.market, table.market tbody, table.market tr, table.market td { display: block; width: auto; }
  table.pub thead, table.market thead { display: none; }
  table.pub td, table.market td { border-bottom: 0; padding: 2px 16px; }
  table.pub tr.bdc-head td { padding: 12px 16px; border-bottom: 0; }
  table.pub tbody tr:not(.bdc-head), table.market tbody tr { padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
  table.pub tbody:last-child tr:last-child, table.market tbody tr:last-child { border-bottom: 0; }
  table.pub td.pub-name { min-width: 0; max-width: none; font-weight: 500; padding-bottom: 6px; }
  table.pub td[data-label], table.market td[data-label] { display: inline-block; padding: 2px 0 2px 16px; font-size: 13px; text-align: left; }
  table.pub td[data-label]::before, table.market td[data-label]::before { content: attr(data-label) " "; color: var(--muted); }
  table.market td[data-label] .sub { display: none; }
  table.pub td.spark-cell { display: inline-block; vertical-align: middle; padding-left: 16px; }
  table.pub td.spark-cell:empty { display: none; }
  table.market td.bdcs { padding-top: 4px; padding-bottom: 6px; }
  table.market td.n:not([data-label]) { display: none; }
}

/* ---------------------------------------------------------------------------
   v0.7: calmer pages. One statement on top, findings, one main picture, the rest folded away with its
   finding in the title (docs/GESTALTUNG.md).
   --------------------------------------------------------------------------- */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--surface); padding: 8px 14px; border-radius: 12px; }
.skip:focus { left: 16px; }
.nav-cta { flex: none; margin-left: 4px; }
.plain-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.trash-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: flex-start; }
.trash-delete summary { list-style: none; cursor: pointer; }
.trash-delete .field { margin: 8px 0; text-align: left; }
.nav-adv { flex: none; margin: 0 0 0 4px; }
.nav-group { display: inline-flex; gap: 2px; flex: none; margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line-strong); }
/* Advanced right beside the points of the bar (Tobias, 03.11.2026): the points take only their room, the space goes after Advanced. On a phone the points
   have a line of their own, and Advanced stays in the first line. */
.pill > .links { flex: 0 1 auto; }
.nav-space { flex: 1 1 0; min-width: 4px; }
@media (max-width: 700px) { .pill > .links { flex: 1 0 100%; } .nav-space { display: none; } }
/* Without a booked module (K1b): grey with a lock, no link and no button. Whom to talk to shows on pointing at it or on focus; where nothing can point
   (a phone), it stands in the account menu. */
.nav-locked-wrap { position: relative; flex: none; display: inline-flex; margin-left: 4px; }
.nav-locked-wrap .nav-adv { margin: 0; }
.nav-locked { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 12px; border-radius: 15px; border: 1px dashed var(--line-strong);
  color: var(--muted); font-size: 13px; white-space: nowrap; cursor: not-allowed; user-select: none; }
.nav-locked .lock { flex: none; }
.nav-hint { display: none; position: absolute; left: 0; top: 100%; z-index: 45; padding-top: 8px; }
.nav-locked-wrap:hover .nav-hint, .nav-locked-wrap:focus-within .nav-hint { display: block; }
.nav-hint-box { display: block; white-space: nowrap; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--menu-shadow); color: var(--ink-2); font-size: 13px; }
.nav-hint-box strong { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .nav-hint { left: auto; right: 0; } .nav-hint-box { white-space: normal; width: max-content; max-width: min(240px, calc(100vw - 150px)); } }
/* Settings (operator): the hidden name of each switch stays inside its cell, so that a phone does not scroll sideways */
.module-table td { position: relative; }
.menu .menu-talk { display: none; }
@media (hover: none) { .menu .menu-talk { display: block; } .menu span.menu-talk { margin-top: 10px; } }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.adv-grid .panel h2 { margin: 0 0 6px; font-size: 18px; }
.adv-example { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.adv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.adv-steps li { padding: 4px 10px; border-radius: 999px; background: var(--fill); color: var(--ink-2); }
.adv-steps li.done { background: var(--ink); color: var(--surface); }
.menu a { display: block; padding: 7px 0; color: var(--ink); font-size: 14px; }
.menu a:first-of-type { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .nav-cta { display: none; } }

.stat .note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.stat.warn b { color: var(--warning-ink); }
.stat.over b { color: var(--critical); }
.checksum { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; color: var(--ink-2); }
.close-form { margin-top: 12px; }
.close-form .field { max-width: 620px; }
.close-form input[type="text"] { width: 100%; }
table.against tr.group th { padding-top: 14px; font-weight: 600; text-align: left; }
.company-stats, .market-stats { margin-top: 0; }

.findings ul { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--panel-border);
  border-radius: var(--radius-s); box-shadow: var(--shadow); overflow: hidden; }
.findings li { position: relative; padding: 13px 18px 13px 40px; font-size: 14.5px; line-height: 1.45; }
.findings li::before { content: ""; position: absolute; left: 18px; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.findings li + li { border-top: 1px solid var(--line); }
.findings a { color: var(--ink); }
.findings a:hover { color: var(--equity); }
.findings .list-title { margin-top: 0; }

.folds > * + * { margin-top: 12px; }
.fold { background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-s); box-shadow: var(--shadow); }
.fold > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) 16px; align-items: baseline;
  gap: 4px 16px; padding: 16px 20px; border-radius: var(--radius-s); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { background: var(--surface-2); }
.fold-title { font: 600 16px/1.35 var(--display); letter-spacing: -0.01em; }
.fold-take { color: var(--ink-2); font-size: 14px; min-width: 0; }
.fold-chev { align-self: center; justify-self: end; color: var(--muted); transition: transform 0.15s ease; display: inline-flex; }
.fold[open] > summary .fold-chev { transform: rotate(90deg); }
.fold[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius-s) var(--radius-s) 0 0; }
.fold-body { padding: 18px 20px 20px; }
.fold-body > * + * { margin-top: 14px; }
.fold-foot { font-size: 13px; }
.fold-h { font-size: 14px; color: var(--ink-2); margin-top: 18px; }
.fold-h:first-child { margin-top: 0; }
@media (max-width: 700px) { .fold > summary { grid-template-columns: minmax(0, 1fr) 16px; } .fold-take { grid-column: 1; } .fold-chev { grid-row: 1; grid-column: 2; } }

.more { margin-top: 8px; }
.more > summary { list-style: none; cursor: pointer; color: var(--equity); font-size: 14px; padding: 6px 16px; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary { color: var(--muted); }
.more .ilist { margin-top: 6px; }
.hero .actions { margin-top: 18px; }

dl.defs { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 14px; }
dl.defs dt { font-weight: 600; }
dl.defs dd { margin: 0; color: var(--ink-2); }

/* line charts with labels at the line ends, the cash flow chart */
.sc-zero { stroke: var(--ink-2); stroke-width: 1; opacity: 0.55; }
.lc .ln path { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.lc .ln circle { fill: var(--surface); stroke: var(--muted); stroke-width: 1.2; }
.lc .ln text { font: 500 12px var(--sans); fill: var(--ink-2); }
.lc .ln.hl path { stroke: var(--ink); stroke-width: 2.4; }
.lc .ln.hl circle { stroke: var(--ink); }
.lc .ln.hl text { fill: var(--ink); font-weight: 650; }
.lc .ln.acc path { stroke: var(--debt); stroke-width: 2.6; }
.lc .ln.acc circle { stroke: var(--debt); }
.lc .ln.acc text { fill: var(--debt); font-weight: 650; }
.lc .ln.paid path { stroke: var(--muted); stroke-width: 2.2; }
.lc .ln.paid text { fill: var(--ink-2); font-weight: 600; }
.lc .ln.dist path { stroke: var(--good); stroke-width: 2.2; }
.lc .ln.dist circle { stroke: var(--good); }
.lc .ln.dist text { fill: var(--good-ink); font-weight: 600; }
.lc .ln.nav path { stroke: var(--ink); stroke-width: 2.4; }
.lc .ln.nav circle { stroke: var(--ink); }
.lc .ln.nav text { fill: var(--ink); font-weight: 650; }
.fc .fb.called { fill: var(--muted); fill-opacity: 0.75; }
.fc .fb.distributed { fill: var(--good); fill-opacity: 0.85; }
.fc .fl { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.fc .fd { fill: var(--ink); }
.fc .fl-label { font: 600 13px var(--sans); fill: var(--ink); }
.lg.called { border-radius: 2px; background: var(--muted); }
.lg.distributed { border-radius: 2px; background: var(--good); }
.lg.jline { width: 18px; height: 0; border-radius: 0; border-top: 2px solid var(--ink); }
table.funds .tag { margin-right: 6px; }
tfoot th, tfoot td { border-top: 1px solid var(--line-strong); font-weight: 600; }

/* Breakdowns: donut plus the exact shares beside it */
.dn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 14px; }
.dn-card h3 { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.dn-take { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--ink-2); }
.dn-body { display: flex; gap: 18px; align-items: center; }
.dn { width: 132px; height: 132px; flex: none; overflow: visible; }
.dn-seg { stroke: var(--surface); stroke-width: 2px; }
.dn-seg.solo { stroke: none; }
.dn-v { font-size: 24px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.dn-l { font-size: 11px; fill: var(--muted); }
.dn-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: grid; gap: 7px; }
.dn-list li { font-size: 13px; }
.dn-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; color: inherit; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
a.dn-row:hover { text-decoration: none; background: var(--fill); }
.dn-list.with-delta .dn-row { grid-template-columns: 10px minmax(0, 1fr) auto auto auto; }
.dn-delta { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; min-width: 54px; }
.is-picked .dn-label { font-weight: 600; }
.dn-list.has-pick li:not(.is-picked) .dn-label, .dn-list.has-pick li:not(.is-picked) .dn-share { color: var(--muted); }
.dn-list.has-pick li:not(.is-picked) .sw { opacity: 0.3; }
.dn a { cursor: pointer; }
.dn a:hover .dn-seg { opacity: 0.8; }
.dn-seg.is-dim { opacity: 0.25; }
.dn a:hover .dn-seg.is-dim { opacity: 0.5; }
.dn-seg.dn-ref { stroke: none; opacity: 0.6; }
.dn-wrap { scroll-margin-top: 84px; }
@media (max-width: 760px) { .dn-wrap { scroll-margin-top: 130px; } }
.dn-hint { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.dn-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--fill); font-size: 13px; }
.dn-filter .note { flex-basis: 100%; margin: 0; font-size: 12px; }
.dn-chip { padding: 3px 9px; border-radius: 9px; background: var(--surface); color: var(--ink); border: 1px solid var(--panel-border); }
.dn-chip:hover { text-decoration: none; border-color: var(--line-strong); }
.dn-clear { margin-left: auto; }
.dn-list .sw { width: 10px; height: 10px; border-radius: 3px; }
.dn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.dn-label svg { vertical-align: -3px; margin-left: 4px; }
.dn-share { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); text-align: right; }
.dn-val { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; min-width: 52px; }
.dn-card .note { margin-top: 10px; }
.dn-rest { fill: var(--line-strong); background: var(--line-strong); }
.dn-none { fill: var(--track); background: var(--track); }
.dn-lead-de { fill: var(--dn-lead-de); background: var(--dn-lead-de); } .dn-lead-eq { fill: var(--dn-lead-eq); background: var(--dn-lead-eq); } .dn-teal { fill: var(--dn-teal); background: var(--dn-teal); } .dn-violet { fill: var(--dn-violet); background: var(--dn-violet); }
.dn-magenta { fill: var(--dn-magenta); background: var(--dn-magenta); } .dn-olive { fill: var(--dn-olive); background: var(--dn-olive); } .dn-sky { fill: var(--dn-sky); background: var(--dn-sky); } .dn-bronze { fill: var(--dn-bronze); background: var(--dn-bronze); }
.dn-eq0 { fill: var(--dn-eq0); background: var(--dn-eq0); } .dn-eq1 { fill: var(--dn-eq1); background: var(--dn-eq1); } .dn-eq2 { fill: var(--dn-eq2); background: var(--dn-eq2); } .dn-eq3 { fill: var(--dn-eq3); background: var(--dn-eq3); } .dn-eq4 { fill: var(--dn-eq4); background: var(--dn-eq4); } .dn-eq5 { fill: var(--dn-eq5); background: var(--dn-eq5); }
.dn-de0 { fill: var(--dn-de0); background: var(--dn-de0); } .dn-de1 { fill: var(--dn-de1); background: var(--dn-de1); } .dn-de2 { fill: var(--dn-de2); background: var(--dn-de2); } .dn-de3 { fill: var(--dn-de3); background: var(--dn-de3); } .dn-de4 { fill: var(--dn-de4); background: var(--dn-de4); } .dn-de5 { fill: var(--dn-de5); background: var(--dn-de5); }
.dn-all0 { fill: var(--dn-all0); background: var(--dn-all0); } .dn-all1 { fill: var(--dn-all1); background: var(--dn-all1); } .dn-all2 { fill: var(--dn-all2); background: var(--dn-all2); } .dn-all3 { fill: var(--dn-all3); background: var(--dn-all3); } .dn-all4 { fill: var(--dn-all4); background: var(--dn-all4); } .dn-all5 { fill: var(--dn-all5); background: var(--dn-all5); }
@media (max-width: 760px) { .dn-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .dn-body { flex-direction: column; align-items: stretch; } .dn { align-self: center; } }
/* Sectors over the quarters (v0.13.0) */
.segctl.mini { padding: 2px; border-radius: 10px; }
.segctl.mini a { padding: 4px 11px; font-size: 13px; border-radius: 8px; }
.panel-take { font-size: 14px; color: var(--ink); margin-top: 6px; }
.sector-table { margin-top: 14px; }
.sector-table td svg { vertical-align: -3px; }

/* What if (Tobias, 29.10.2026): a dumbbell per row, today as a ring, with the fund as a dot in the colour of its side */
.delta.plain { color: var(--ink-2); }
.shift-table td { vertical-align: middle; white-space: nowrap; }
.shift-table td:first-child { white-space: normal; min-width: 130px; }
.shift-table .bell-cell { width: 236px; padding-top: 6px; padding-bottom: 6px; }
.bell { display: block; overflow: visible; }
.bell-track { stroke: var(--line); stroke-width: 1; }
.bell-link { stroke-width: 2; stroke-linecap: round; opacity: 0.6; }
.bell.de .bell-link { stroke: var(--debt); }
.bell.eq .bell-link { stroke: var(--equity); }
.bell-today { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
.bell-after { stroke: var(--surface); stroke-width: 2; }
.bell.de .bell-after { fill: var(--debt); }
.bell.eq .bell-after { fill: var(--equity); }
.lg.bell-today { background: var(--surface); border: 1.5px solid var(--ink-2); }
.lg.bell-after.de { background: var(--debt); }
.lg.bell-after.eq { background: var(--equity); }
.wi-table tr.group th { padding-top: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.wi-table tbody th[scope="row"] { font-size: 14px; font-weight: 400; color: var(--ink); white-space: normal; padding-top: 12px; }
.wi-table td b { font-weight: 600; }
@media (max-width: 600px) {          /* a phone: the exact numbers, without the dumbbells and the fund alone */
  .shift-table .bell-cell, .shift-legend, .wi-table tr > :nth-child(3) { display: none; }
  .shift-table th, .shift-table td, .wi-table th, .wi-table td { padding-left: 6px; padding-right: 6px; }
  .shift-table th, .wi-table th { white-space: normal; }
  .shift-table td:first-child { min-width: 0; }
  .wi-table td .sub { white-space: normal; }
}

/* Downloads (v0.15.0): a quiet link on the main charts, the choice of parts and format */
.panel-tools { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.dl-link { font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.dl-link:hover { color: var(--ink); }
.export-form fieldset + fieldset { margin-top: 8px; }

/* Language of the interface (v0.16.0): two buttons in the account menu */
.lang-switch { display: flex; gap: 6px; margin: 10px 0 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.lang-switch button { flex: 1; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2); cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 600; }
.lang-switch button:hover { border-color: var(--ink-2); }

/* running text with lists (security page) */
.prose ul { margin: 10px 0 14px; padding-left: 20px; }
.prose li + li { margin-top: 4px; }
.prose h2 { margin-bottom: 8px; }

/* a list of name and value: bank details, call backs */
dl.kv { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 6px 16px; margin: 0 0 12px; font-size: 14px; }   /* a list of terms only: td.kv of the watchlist stays a table cell */
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bank-findings { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.bank-findings li { position: relative; padding: 5px 0 5px 20px; }
.bank-findings li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.section-head p.side-by-side { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }

/* scenarios side by side: on a phone the first column stays, the rest moves sideways */
.cmp-table th:first-child, .cmp-table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.cmp-table tr.group th:first-child { position: static; }
.cmp-table th, .cmp-table td { white-space: nowrap; }
.cmp-table tbody th[scope="row"] { white-space: normal; min-width: 150px; max-width: 240px; }
.cmp-amount { width: 72px; text-align: right; }

/* the "?" next to the account menu */
.nav-help { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-weight: 600; text-decoration: none; flex: none; }
.nav-help:hover, .nav-help:focus-visible { background: var(--fill); }
textarea { height: auto; font-family: inherit; line-height: 1.45; resize: vertical; }
/* the table of key figures hides the column 'the fund alone' on a phone; here every column is a scenario */
.wi-table.cmp-table tr > :nth-child(3) { display: table-cell; }

/* columns assigned by hand (K2a): the first rows of a table with a choice per column; the table moves sideways on a phone, the page does not */
.field .label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.colmap { font-size: 13px; }
.colmap th, .colmap td { padding: 7px 10px; white-space: nowrap; max-width: 18em; overflow: hidden; text-overflow: ellipsis; }
.colmap thead th { vertical-align: bottom; color: var(--ink-2); }
.colmap thead label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.colmap thead select { min-width: 9.5em; min-height: 34px; padding: 5px 8px; border-radius: 10px; font-size: 13px; }
.colmap th:first-child, .colmap td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.colmap tbody th[scope="row"] { font-size: 13px; white-space: nowrap; padding-top: 7px; padding-bottom: 7px; }
.colmap tbody th a { display: inline-block; min-width: 2em; color: var(--ink-2); font-weight: 500; }
.colmap tr.is-head td, .colmap tr.is-head th { background: var(--equity-wash); font-weight: 600; color: var(--ink); }
.colmap tbody th a[aria-current="true"] { color: var(--ink); }

/* checks on upload (K2b): one line per check with its result beside the title, the sentences below; no table, so nothing moves sideways */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { padding: 10px 0; border-top: 1px solid var(--line); }
.checks li:first-child { border-top: 0; padding-top: 0; }
.ck-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.checks p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.checks .ck-none p { color: var(--muted); }
.checks-fold { margin-top: 18px; }

/* the funds over four quarters (K2b): on a phone the fund stays, the quarters move sideways, the page does not */
.matrix th, .matrix td { white-space: nowrap; }
.matrix tbody th[scope="row"] { white-space: normal; min-width: 130px; max-width: 220px; font-weight: 500; }
.matrix tr > :first-child { position: sticky; left: -6px; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--line); }   /* -6px: over the padding of .panel.table-wrap, so nothing shows beside it */
.matrix td .sub { white-space: normal; max-width: 14em; }
.matrix td.mx-nd { color: var(--muted); font-size: 13px; }
.matrix td a { text-decoration: none; }
.matrix td a:hover .status, .matrix td a:focus-visible .status { text-decoration: underline; }

/* Combined view of both books (K3c, docs/GESTALTUNG.md): the palette of the overlap view's stacks (once the heatmap's steps), in the colours of
   the logo (Tobias, 05.11.2026): blue for private equity, orange for private credit, grey for total and shared, which hold both. The number
   stands in each cell; its contrast to the step is at least 4.5:1 in both modes. The map colours a country in the hue of the book it shows. */
:root { --hm-eq-1: #c5dafe; --hm-eq-2: #94bbfe; --hm-eq-3: #5c97fe; --hm-eq-4: #0c4ebc; --hm-eq-5: #003081; --hm-de-1: #ffcea9; --hm-de-2: #ffa151; --hm-de-3: #dc7f24; --hm-de-4: #834602; --hm-de-5: #552c01; --hm-all-1: #d3d9e4; --hm-all-2: #b5bbc5; --hm-all-3: #949aa4; --hm-all-4: #535861; --hm-all-5: #333841; --hm-ink-3: #15171c; --hm-ink-strong: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hm-eq-1: #013b92; --hm-eq-2: #2259b3; --hm-eq-3: #609afa; --hm-eq-4: #98bffe; --hm-eq-5: #ccdffe; --hm-de-1: #603801; --hm-de-2: #854f02; --hm-de-3: #d3882e; --hm-de-4: #f9ab56; --hm-de-5: #ffd6ad; --hm-all-1: #3c434d; --hm-all-2: #575e69; --hm-all-3: #949ca8; --hm-all-4: #b6becb; --hm-all-5: #d6dfeb; --hm-ink-3: #0b0f15; --hm-ink-strong: #0b0f15; }
}
:root[data-theme="dark"] { --hm-eq-1: #013b92; --hm-eq-2: #2259b3; --hm-eq-3: #609afa; --hm-eq-4: #98bffe; --hm-eq-5: #ccdffe; --hm-de-1: #603801; --hm-de-2: #854f02; --hm-de-3: #d3882e; --hm-de-4: #f9ab56; --hm-de-5: #ffd6ad; --hm-all-1: #3c434d; --hm-all-2: #575e69; --hm-all-3: #949ca8; --hm-all-4: #b6becb; --hm-all-5: #d6dfeb; --hm-ink-3: #0b0f15; --hm-ink-strong: #0b0f15; }
.segctl.hm-drivers { display: flex; flex-wrap: wrap; width: auto; margin-top: 2px; }
/* The overlap view (05.11.2026, replaces the heatmap on the page): mirrored bars, a bubble chart, 100% stacked bars. Blue is private equity,
   orange private credit, grey the overlap, as everywhere. Widths are the classes bw-0 to bw-100, nothing inline. Pointing at a row
   lightens its background only: the bars keep their colours. */
.ov-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.ov-kpis { display: flex; flex-wrap: wrap; gap: 6px 32px; margin: 14px 0 4px; }
.ov-kpi b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-kpi span { font-size: 13px; color: var(--ink-2); }
.ov-kpi .note { display: block; margin: 0; font-size: 12px; color: var(--muted); }
.ov-insight { margin: 10px 0 12px; font-size: 15px; color: var(--ink); }
.ov-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; }
.ov-tools .segctl { display: inline-flex; width: auto; }
.ov-head, .ov-row { display: grid; grid-template-columns: 4.4em minmax(0, 1fr) minmax(7.5em, 12em) minmax(0, 1fr) 4.4em 9.5em;
  grid-template-areas: "pev pe name pc pcv ov"; align-items: center; column-gap: 8px; font-variant-numeric: tabular-nums; }
.ov-bars.is-amount .ov-head, .ov-bars.is-amount .ov-row { grid-template-columns: 5.2em minmax(0, 1fr) minmax(7.5em, 12em) minmax(0, 1fr) 5.2em;
  grid-template-areas: "pev pe name pc pcv"; }
.ov-head { padding: 0 6px 6px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.ov-h-pe { grid-column: 1 / 3; text-align: right; }
.ov-h-name { grid-area: name; text-align: center; }
.ov-h-pc { grid-column: 4 / 6; }
.ov-h-ov { grid-area: ov; }
.ov-list { list-style: none; margin: 0; padding: 0; }
.ov-list.ov-apart { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-strong); }
.ov-row { padding: 5px 6px; border-radius: 6px; color: var(--ink); text-decoration: none; }
a.ov-row:hover, a.ov-row:focus-visible { background: var(--surface-2); }
.ov-row.is-picked { background: var(--surface-2); font-weight: 600; }
.ov-name { grid-area: name; font-size: 14px; text-align: center; overflow-wrap: anywhere; }
.ov-v { font-size: 13px; color: var(--ink-2); }
.ov-v-pe { grid-area: pev; text-align: right; }
.ov-v-pc { grid-area: pcv; }
.ov-track { display: flex; height: 14px; }
.ov-pe { grid-area: pe; justify-content: flex-end; }
.ov-pc { grid-area: pc; }
.ov-track > i { display: flex; height: 100%; overflow: hidden; }
.ov-pe > i { justify-content: flex-end; background: var(--equity); border-radius: 4px 0 0 4px; }
.ov-pc > i { background: var(--debt); border-radius: 0 4px 4px 0; }
.ov-pe > i > b { height: 100%; background: var(--dn-eq0); }
.ov-pc > i > b { height: 100%; background: var(--dn-de0); }
.ov-row.is-ns .ov-pe > i, .ov-row.is-ns .ov-pc > i { background: var(--line-strong); }
.ov-row.is-ns .ov-name, .ov-row.is-ns .ov-v { color: var(--muted); }
.ov-o { grid-area: ov; display: flex; align-items: center; gap: 8px; }
.ov-ob { flex: 0 0 4.2em; display: flex; height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
.ov-ob > i { height: 100%; background: var(--dn-all2); }
.ov-o-word { display: none; }
@media (max-width: 639px) {
  .ov-head, .ov-row { grid-template-columns: 3.8em minmax(0, 1fr) minmax(0, 1fr) 3.8em; grid-template-areas: "name name ov ov" "pev pe pc pcv"; row-gap: 4px; }
  .ov-bars.is-amount .ov-head, .ov-bars.is-amount .ov-row { grid-template-columns: 4.6em minmax(0, 1fr) minmax(0, 1fr) 4.6em;
    grid-template-areas: "name name name name" "pev pe pc pcv"; }
  .ov-head { grid-template-areas: "pe pe pc pc"; }
  .ov-h-pe { grid-column: 1 / 3; } .ov-h-pc { grid-column: 3 / 5; }
  .ov-h-name, .ov-h-ov { display: none; }
  .ov-name { text-align: left; }
  .ov-o { justify-content: flex-end; white-space: nowrap; } .ov-ob { display: none; }
  .ov-o-word { display: inline; }
}
/* Cyclicality and asset intensity: a row per level, a bar per book in its colour (Tobias, 05.11.2026); Not stated grey below the line */
.lv-sw { display: inline-block; width: 12px; height: 10px; margin-right: 5px; border-radius: 2px; }
.lv-sw.lv-equity, .lv-equity .lv-track > i { background: var(--equity); }
.lv-sw.lv-debt, .lv-debt .lv-track > i { background: var(--debt); }
.lv-sw.lv-overlap, .lv-overlap .lv-track > i { background: var(--dn-all2); }
.lv-sw.lv-total, .lv-total .lv-track > i { background: var(--line-strong); }
.ov-levels { list-style: none; margin: 0; padding: 0; }
.ov-levels.ov-apart { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-strong); }
.lv-row { display: grid; grid-template-columns: minmax(7em, 11em) minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 7px 6px;
  border-radius: 6px; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
a.lv-row:hover, a.lv-row:focus-visible { background: var(--surface-2); }
.lv-row.is-picked { background: var(--surface-2); font-weight: 600; }
.lv-name { font-size: 14px; }
.lv-bars { display: grid; row-gap: 3px; }
.lv-bar { display: grid; grid-template-columns: minmax(0, 1fr) 4.2em; align-items: center; column-gap: 8px; }
.lv-track { display: flex; height: 11px; }
.lv-track > i { display: block; height: 100%; border-radius: 0 3px 3px 0; }
.lv-row.is-ns .lv-track > i { background: var(--line-strong); }
.lv-row.is-ns .lv-name, .lv-row.is-ns .ov-v { color: var(--muted); }
@media (max-width: 639px) { .lv-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } }
/* 100% stacked bars of an ordinal driver: one hue per bar from light to dark, the levels always in the same order; Not stated striped grey */
.ov-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-size: 12.5px; color: var(--ink-2); }
.ov-legend span { display: inline-flex; align-items: center; gap: 2px; }
.st-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.ov-legend .st-sw:last-of-type { margin-right: 5px; }
.ov-stacks { list-style: none; margin: 0; padding: 0; }
.ov-stacks li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 0; }
.ov-stacks li.is-subtle { opacity: 0.75; }
.ov-st-name { font-size: 14px; color: var(--ink); }
.ov-st-bar { display: flex; height: 26px; border-radius: 4px; overflow: hidden; }
.ov-st-empty { font-size: 13px; color: var(--muted); }
.st { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 100%; font-size: 12px; font-variant-numeric: tabular-nums;
  text-decoration: none; color: var(--ink); border-right: 1px solid var(--surface); }
.st:last-child { border-right: 0; }
a.st:hover, a.st:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.st-eq-1 { background: var(--hm-eq-1); } .st-eq-2 { background: var(--hm-eq-3); color: var(--hm-ink-3); } .st-eq-3 { background: var(--hm-eq-4); color: var(--hm-ink-strong); }
.st-de-1 { background: var(--hm-de-1); } .st-de-2 { background: var(--hm-de-3); color: var(--hm-ink-3); } .st-de-3 { background: var(--hm-de-4); color: var(--hm-ink-strong); }
.st-all-1 { background: var(--hm-all-1); } .st-all-2 { background: var(--hm-all-3); color: var(--hm-ink-3); } .st-all-3 { background: var(--hm-all-4); color: var(--hm-ink-strong); }
.st-none { background: repeating-linear-gradient(45deg, var(--track) 0 4px, var(--surface-2) 4px 8px); color: var(--muted); }
@media (max-width: 639px) { .ov-stacks li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
/* the bubble chart: grey bubbles (the overlap), a small empty circle for a value without overlap */
.sc.bc { max-width: 620px; margin: 6px auto 0; }
.bc-diag { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 5 4; }
.bc-corner { font: 400 11.5px var(--sans); fill: var(--muted); }
.bb { fill: var(--dn-all2); fill-opacity: 0.55; stroke: var(--dn-all1); stroke-width: 1; }
.bb.empty { fill: none; stroke: var(--muted); }
.bc-points a:hover .bb, .bc-points a:focus-visible .bb { stroke: var(--ink); stroke-width: 2; }
.map-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.map-tools .segctl { display: inline-flex; width: auto; }
.map-svg { display: block; width: 100%; height: auto; max-height: 620px; }
.mp { stroke: var(--surface); stroke-width: 0.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mp-land { fill: var(--track); }
.map-svg a:hover .mp, .map-svg a:focus-visible .mp, .mp.is-picked { stroke: var(--ink); stroke-width: 1.4; }
.mp-eq1 { fill: var(--dn-eq4); background: var(--dn-eq4); } .mp-eq2 { fill: var(--dn-eq3); background: var(--dn-eq3); } .mp-eq3 { fill: var(--dn-eq2); background: var(--dn-eq2); } .mp-eq4 { fill: var(--dn-eq1); background: var(--dn-eq1); } .mp-eq5 { fill: var(--dn-eq0); background: var(--dn-eq0); }
.mp-de1 { fill: var(--dn-de4); background: var(--dn-de4); } .mp-de2 { fill: var(--dn-de3); background: var(--dn-de3); } .mp-de3 { fill: var(--dn-de2); background: var(--dn-de2); } .mp-de4 { fill: var(--dn-de1); background: var(--dn-de1); } .mp-de5 { fill: var(--dn-de0); background: var(--dn-de0); }
.mp-all1 { fill: var(--dn-all4); background: var(--dn-all4); } .mp-all2 { fill: var(--dn-all3); background: var(--dn-all3); } .mp-all3 { fill: var(--dn-all2); background: var(--dn-all2); } .mp-all4 { fill: var(--dn-all1); background: var(--dn-all1); } .mp-all5 { fill: var(--dn-all0); background: var(--dn-all0); }
.conc-table td .sub { white-space: nowrap; }
@media (max-width: 520px) {
  table.compact.conc-table th, table.compact.conc-table td, table.compact.map-table th, table.compact.map-table td { padding: 7px 5px; font-size: 13px; }
  table.compact.conc-table th, table.compact.map-table th { white-space: normal; }
  .conc-table td .sub { font-size: 11.5px; }
}

/* Diversification across your managers (K3d, docs/GESTALTUNG.md): per book a sentence, three figures and the matrix fund by fund. The cells
   in the grey steps of the overlap view (the same contrast of at least 4.5:1, tests/test_sicht.py), the number in every cell; grey, because a
   similarity is neither good nor bad. On a phone the fund stays, the other columns move sideways inside the table, the page does not. */
.dv-book { margin-top: 18px; }
.dv-book + .dv-book { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.dv-lead { margin: 4px 0 0; font-size: 15px; }
.stats.dv-stats { margin-top: 14px; margin-bottom: 12px; }
.dv-stats .stat .note { white-space: normal; max-width: 26ch; }
.dv-chance { margin: 6px 0 4px; }
.dv-book .table-wrap { position: relative; }      /* the hidden names of the columns are positioned: so they stay inside the table that moves sideways, not beside the page */
.dv-matrix th, .dv-matrix td { white-space: nowrap; }
.dv-matrix thead th { vertical-align: bottom; }
.dv-matrix tbody th[scope="row"] { white-space: normal; min-width: 150px; max-width: 230px; font-weight: 500; }
.dv-matrix tr > :first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--line); }
.dv-matrix td { border-bottom: 2px solid var(--surface); font-variant-numeric: tabular-nums; }
.dv-matrix td .sub { font-size: 11.5px; color: inherit; }
.dv-no { display: inline-block; min-width: 1.7em; color: var(--muted); font-variant-numeric: tabular-nums; }
.dv-self, .dv-0 { color: var(--muted); }
.dv-1 { background: var(--hm-all-1); } .dv-2 { background: var(--hm-all-2); } .dv-3 { background: var(--hm-all-3); color: var(--hm-ink-3); } .dv-4 { background: var(--hm-all-4); color: var(--hm-ink-strong); } .dv-5 { background: var(--hm-all-5); color: var(--hm-ink-strong); }
@media (max-width: 520px) {
  .dv-stats .stat { flex: 1 0 100%; padding: 0; border-left: 0; }       /* one below the other, without the stagger of a wrapped row */
  .dv-stats .stat .note { max-width: none; }
  table.compact.dv-matrix th, table.compact.dv-matrix td { padding: 7px 5px; font-size: 13px; }
  .dv-matrix tbody th[scope="row"] { min-width: 128px; }
  .dv-no { min-width: 1.3em; }
}

/* Valuations against the market (K3e): per manager a bar for market proximity from 0 to 150 %, the line at 100 % where a manager follows
   the BDCs' markdowns in full. Grey; orange only below the client's share (GESTALTUNG rule 7). Widths are the classes bw-0 to bw-100. */
.mp-table th[scope="row"] { font-weight: 500; min-width: 140px; }
.mp-table td { vertical-align: top; }
.mp-fig { display: block; font-variant-numeric: tabular-nums; }
.mp-bar { position: relative; display: block; width: 100%; min-width: 120px; max-width: 220px; height: 8px; margin: 6px 0 4px; background: var(--track); border-radius: 4px; }
.mp-bar i { display: block; height: 8px; border-radius: 4px; background: var(--ink-2); }
.mp-bar i.is-low { background: var(--warning); }
.mp-full { position: absolute; top: -3px; bottom: -3px; left: 66.667%; width: 2px; background: var(--ink); border-radius: 1px; }
@media (max-width: 520px) {
  .mp-table th[scope="row"] { min-width: 110px; }
  .mp-bar { min-width: 90px; }
}

/* Early warnings (K3f): the PIK share above the steps, the sources of a pattern below its chips */
.ew-pik { margin: 0 0 10px; font-size: 14px; }
.ew-src { display: block; margin-top: 4px; }
.buckets.signs li { grid-template-columns: minmax(110px, 220px) minmax(0, 1fr) 44px 22px; }
@media (max-width: 520px) { .buckets.signs li { grid-template-columns: minmax(0, 1fr) 64px 44px 22px; } }
.chips li .chip-src { display: block; font-size: 11.5px; }
.chips li .chip-src a { color: inherit; }

/* Scenarios (K4a): the choice under the statement (links and a form without script), the bars per sector in the shape of the overlap view
   with the amounts (equity to the left, credit to the right, the companies on both sides darker), a table of companies, the footnote. */
.sc-choice { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin-top: 16px; }
.sc-choice .segctl { display: inline-flex; width: auto; }
.sc-form { margin: 0; }
.sc-form .field { min-width: 0; }
.sc-form select { max-width: 100%; }
.sc-bars .ov-row.is-picked .ov-name { font-weight: 600; }
.sc-table tbody th[scope="row"] { font-weight: 500; min-width: 150px; }
.sc-companies tr > :first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--line); }
.sc-table tr.sc-both th[scope="row"] a { font-weight: 600; }
.sc-table td { font-variant-numeric: tabular-nums; }
.sc-pd th[scope="row"], .sc-rho th[scope="row"] { white-space: nowrap; font-weight: 500; }
.sc-foot { margin: 18px 0 0; font-size: 13px; }
/* Rate rise and spread widening (K4b): the rows of the level bars, today grey and after the rise orange (credit); a step below the limit
   says so in red (GESTALTUNG rule 7); the markdown by sector with its amount and share; the row of the table shown above in bold. */
.st-bars .lv-row.is-low .lv-name, .lv-low { color: var(--critical); }
.lv-low { display: block; font-size: 12px; }
.st-wide .lv-bar { grid-template-columns: minmax(0, 1fr) 8.5em; }
.st-steps tr.is-picked th, .st-steps tr.is-picked td { font-weight: 600; }
@media (max-width: 520px) {
  .sc-choice .segctl { display: grid; width: 100%; }
  .sc-form, .sc-form .field { width: 100%; }
  .sc-form select { width: 100%; }
  .sc-table tbody th[scope="row"] { min-width: 128px; }
}
/* Expected and unexpected loss (K4c): the label "Indicative ..." first in its box, then one table each by sector, rank and manager, the
   largest contributions and the parameters. On a phone each table moves sideways in itself, the first column stays. */
.loss-flag { margin-top: 0; font-size: 14px; }
.loss-title { margin: 20px 0 6px; }
.loss-table tbody th[scope="row"], .loss-table tfoot th[scope="row"] { font-weight: 500; min-width: 150px; }
.loss-table tr > :first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--line); }
.loss-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 520px) {
  .loss-table tbody th[scope="row"], .loss-table tfoot th[scope="row"] { min-width: 120px; }
}

/* The operator console (K5a, docs/GESTALTUNG.md): its own accent, violet, so that it is always clear where one is. Violet means nothing else in Porthexis. */
body.console { --op: #5b3fd0; --op-ink: #4a31b4; --op-wash: rgba(91, 63, 208, 0.10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.console { --op: #a593ff; --op-ink: #c3b7ff; --op-wash: rgba(165, 147, 255, 0.15); } }
:root[data-theme="dark"] body.console { --op: #a593ff; --op-ink: #c3b7ff; --op-wash: rgba(165, 147, 255, 0.15); }
.console .op-pill { border-color: var(--op); box-shadow: 0 0 0 3px var(--op-wash), var(--shadow); }
.op-badge { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 9px; background: var(--op); color: var(--surface); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
.console .pill .brand { margin-right: 10px; }
.console .links a[aria-current="page"] { background: var(--op-wash); color: var(--op-ink); }
.console .btn:not(.secondary) { background: var(--op); color: var(--surface); }
.console .btn:not(.secondary):hover { background: var(--op-ink); }
.console a.btn:not(.secondary), .console a.btn:not(.secondary):hover { color: var(--surface); }
.console .me summary { background: var(--op); color: var(--surface); }
.console .flash { background: var(--op-wash); }
.console a { color: var(--op-ink); }
.console .links a, .console .menu a.btn, .console .pill .brand { color: var(--ink-2); }
.op-band { text-align: center; margin: 12px 16px 0; }
.op-band span { display: inline-block; font-size: 12.5px; color: var(--ink-2); background: var(--op-wash); border-radius: 999px; padding: 4px 14px; }
.op-title { text-align: center; margin: -14px 0 12px; }
.op-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.op-search input[type=search], .op-search select { width: auto; min-width: 0; flex: 1 1 180px; }
.op-modules { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.op-modules legend { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.op-modules label { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.op-modules .field { flex: 1 0 100%; }
.op-narrow { max-width: 460px; }
.op-link, .op-link .secret { overflow-wrap: anywhere; word-break: break-all; }
.op-link .secret, .secret.op-link { font-size: 13.5px; font-weight: 500; max-width: 100%; }
.op-actions { display: inline-block; text-align: left; }
.op-actions summary { list-style: none; }
.op-actions summary::-webkit-details-marker { display: none; }
.op-action-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.op-end { margin-top: 4px; }
.op-end summary { cursor: pointer; list-style: none; }
.op-end summary::-webkit-details-marker { display: none; }
.op-end form { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.op-end input[type=date] { width: auto; }
.op-forms form + form { padding-top: 16px; border-top: 1px solid var(--line); }
.op-filter .form-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi .value.small-value { font-size: 15px; font-weight: 500; line-height: 1.4; }
.op-setup { max-width: 460px; }
.op-confirm-hint { color: var(--ink-2); margin-bottom: 18px; }
.trial-band span { background: rgba(242, 165, 42, 0.16); }
/* K5b: notices of the operators and maintenance on the clients' pages; security, notices, operations and the end of a contract in the console */
.notice-band span { background: var(--fill); max-width: 100%; overflow-wrap: anywhere; }
.notice-band.warning span, .maintenance-band span { background: rgba(242, 165, 42, 0.16); }
.btn.danger { background: var(--critical); color: #fff; }
.btn.danger:hover { filter: brightness(0.92); }
.op-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.op-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; }
.op-steps li form { margin-top: 6px; }
.op-steps li form.inline { margin-left: 8px; }
.op-tenants { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; max-height: 220px; overflow-y: auto; }
.op-tenants label { display: flex; gap: 6px; align-items: center; font-size: 14px; }
@media (max-width: 700px) {
  .op-badge { margin-left: 6px; font-size: 10.5px; padding: 2px 7px; }
  .op-search { flex: 1 0 100%; }
}