/* 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; }

/* 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; }

@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); }
.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 */
.kv { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 6px 16px; margin: 0 0 12px; font-size: 14px; }
.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; }