/* Investors' portfolios (/investors/, pipeline/pages/investors.py), on top of the shared
   «Бенто, графит» classes in style.css. Color lives only on chart marks and icons: the
   treemap boxes, the weight bars and the small squares that name a move (new, added,
   unchanged, reduced, sold out), mixed from the theme's --good / --bad into a neutral
   gray, so the light, paper, graphite and black themes all work without redrawing. */

#inv {
  --mv-base: #d5d8dd;
  --mv-none: var(--mv-base);
  --mv-new: color-mix(in srgb, var(--good) 78%, var(--mv-base));
  --mv-add: color-mix(in srgb, var(--good) 42%, var(--mv-base));
  --mv-same: var(--mv-base);
  --mv-cut: color-mix(in srgb, var(--bad) 42%, var(--mv-base));
  --mv-sold: color-mix(in srgb, var(--bad) 78%, var(--mv-base));
}
:root[data-theme="paper"] #inv { --mv-base: #d9cfb8; }
:root[data-theme="dark"] #inv { --mv-base: #4a5059; }
:root[data-theme="black"] #inv { --mv-base: #3c3c40; }
#inv [hidden] { display: none; }
.inv-wait { visibility: hidden; }

.sw-sq.mv-new { background: var(--mv-new); }
.sw-sq.mv-add { background: var(--mv-add); }
.sw-sq.mv-same, .sw-sq.mv-none { background: var(--mv-same); box-shadow: inset 0 0 0 1px var(--border); }
.sw-sq.mv-cut { background: var(--mv-cut); }
.sw-sq.mv-sold { background: var(--mv-sold); }

/* small pieces */
.inv-top-s { margin-top: 8px; }
.inv-top-m { margin-top: 12px; }
p.inv-flat { margin-bottom: 0; }
.inv-note { margin: -4px 0 12px; max-width: 82ch; }
.inv-foot { margin: 12px 0 0; max-width: 82ch; }
.inv-h3 { margin: 28px 0 8px; }
.inv-more { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.inv-left { text-align: left !important; }
.inv-wrap { white-space: normal !important; }
.inv-spark { height: 72px; }
.inv-status { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ink-2); font-size: 15px; max-width: 70ch; }
.inv-tk { display: inline-block; font: 600 11px/1.5 var(--mono); letter-spacing: -0.01em; color: var(--ink-2); background: var(--track); border-radius: 6px; padding: 0 6px; vertical-align: 1px; white-space: nowrap; }
.inv-cls { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.inv-late { color: var(--accent-ink); font-size: 12px; cursor: help; }
.inv-n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 2px; }
.chip[aria-pressed="true"] .inv-n { color: inherit; opacity: 0.75; }
.chip .sw-sq { margin-right: 6px; vertical-align: -1px; }
.chip:disabled { opacity: 0.4; cursor: default; }

/* ---------- overview: one card per investor ---------- */
.inv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; }
@media (max-width: 900px) { .inv-cards { grid-template-columns: minmax(0, 1fr); } }
.inv-card { display: flex; flex-direction: column; }
.inv-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.inv-card .card-title { font-size: 19px; letter-spacing: -0.02em; }
.inv-card .inv-spark { height: 56px; margin-top: 12px; }
.inv-card-h { margin: 18px 0 8px; font: 600 12px/1.3 var(--font); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.inv-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.inv-bars li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.inv-bar-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-bar-full { font-weight: 500; color: var(--muted); font-size: 13px; }
.inv-bar-name .lg { margin-right: 7px; vertical-align: -5px; }
.inv-bar { display: block; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.inv-bar i { display: block; height: 100%; border-radius: 99px; background: var(--s1); }
.inv-bar-v { font: 600 13px var(--mono); letter-spacing: -0.02em; min-width: 46px; text-align: right; }
.inv-mv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.inv-mv-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.inv-mv-list b { font-weight: 650; }
.inv-mv-amt { font: 500 13px var(--mono); color: var(--ink-2); }
.inv-card .inv-more { margin-top: auto; padding-top: 16px; }
.inv-src { margin: 14px 0 0; }

/* ---------- one investor: key figures and the caveats ---------- */
.inv-keys .card { min-width: 0; }
.inv-lead .big { font-size: clamp(40px, 5vw, 56px); }
.inv-name { font: 650 19px/1.25 var(--font); letter-spacing: -0.015em; }
.inv-name .inv-tk { font-size: 11px; }
.inv-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-count { display: inline-flex; align-items: center; gap: 7px; font: 600 14px var(--font); background: var(--track); border-radius: 10px; padding: 7px 11px; }
.inv-count.zero { opacity: 0.45; }
a.inv-tile-link { color: inherit; }
.inv-cav { margin: 16px 0 0; padding: 20px 24px; }
.inv-cav h2 { font-size: clamp(18px, 2vw, 21px); margin: 0 0 10px; letter-spacing: -0.02em; }
.inv-cav ul { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 15px; display: grid; gap: 6px; max-width: 90ch; }
.inv-cav b { color: var(--ink); font-weight: 600; }
.inv-cav .inv-more { margin-top: 12px; }
#portfolio, #moves, #holdings, #value, #top, #method { scroll-margin-top: 84px; }
@media (max-width: 860px) { #portfolio, #moves, #holdings, #value, #top, #method { scroll-margin-top: 110px; } }

/* ---------- the quarter picker ---------- */
.inv-qbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; }
.inv-qbar h2 { margin: 0; }
.inv-picker { display: inline-flex; align-items: center; gap: 6px; }
.inv-picker select { font: 600 14px var(--font); color: var(--ink); background: var(--track); border: 0; border-radius: 12px; padding: 9px 12px; cursor: pointer; min-width: 9.5em; }
.inv-picker select:focus-visible, .inv-picker .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.inv-picker .icon-btn svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.inv-picker .icon-btn:disabled { opacity: 0.35; cursor: default; }

/* ---------- treemap (js/treemap.js): area = value, color = the quarter's move ---------- */
.inv-map-fig .legend { padding: 2px 40px 0 10px; margin: 0 0 8px; }
.inv-map { min-height: 400px; }
.inv-map .tm-c { stroke: var(--surface); stroke-width: 1; cursor: pointer; }
.inv-map .tm-c.mv-none, .inv-map .tm-c.mv-same { fill: var(--mv-same); }
.inv-map .tm-c.mv-new { fill: var(--mv-new); }
.inv-map .tm-c.mv-add { fill: var(--mv-add); }
.inv-map .tm-c.mv-cut { fill: var(--mv-cut); }
.inv-map .tm-frames rect { fill: none; stroke: var(--surface); stroke-width: 3; }
.inv-map .tm-frames, .inv-map .tm-labels, .inv-map .tm-hi { pointer-events: none; }
.inv-map .tm-t, .inv-map .tm-s { text-anchor: middle; fill: var(--ink); }
.inv-map .tm-t { font-family: var(--font); font-weight: 700; letter-spacing: 0.01em; }
.inv-map .tm-s { font-family: var(--mono); font-weight: 500; }
/* on the strong green of a new position: white text in the light themes, dark in the dark ones */
.inv-map .tm-t.mv-new, .inv-map .tm-s.mv-new { fill: #fff; }
:root[data-theme="dark"] .inv-map .tm-t.mv-new, :root[data-theme="dark"] .inv-map .tm-s.mv-new,
:root[data-theme="black"] .inv-map .tm-t.mv-new, :root[data-theme="black"] .inv-map .tm-s.mv-new { fill: #1d1d1f; }
.inv-map .tm-hi { fill: none; stroke: var(--ink); stroke-width: 2; }
.inv-map.bc-treemap .tip { min-width: 230px; max-width: 300px; }
.inv-map .tm-tip-sub { color: var(--muted); margin: -2px 0 6px; }
.inv-map .inv-tip-late { margin: 6px 0 0; color: var(--accent-ink); }
.inv-map .tm-tap { color: var(--accent-ink); font-weight: 600; margin-top: 6px; }
.inv-map.inv-fail, .inv-plot.inv-fail { min-height: 0; padding: 28px 12px; font-size: 14px; color: var(--muted); }

/* ---------- line charts ---------- */
#inv .chart .legend { padding: 2px 40px 0 10px; margin: 0 0 4px; }
.inv-plot { min-height: 300px; }
.inv-tip-note span:nth-child(2) { color: var(--muted); }

/* ---------- tables ---------- */
.inv-table { font-variant-numeric: tabular-nums; }
.inv-table td, .inv-table th { vertical-align: top; }
.inv-table td:first-child, .inv-table th:first-child { text-align: left; }
.inv-table td a { font-weight: 600; text-decoration: none; }
.inv-table td a:hover { text-decoration: underline; }
.inv-mv td:first-child, .inv-hold td:nth-child(2), .inv-opt td:first-child, .inv-shared td:first-child { white-space: normal; min-width: 190px; }
.inv-hold th:nth-child(2), .inv-hold td:nth-child(2) { text-align: left; }
.inv-hold td:first-child { color: var(--muted); width: 1%; }
.inv-mv th:nth-child(2), .inv-mv td:nth-child(2), .inv-opt th:nth-child(2), .inv-opt td:nth-child(2) { text-align: left; }
.inv-kind { white-space: nowrap; }
.inv-kind .sw-sq, .inv-hold td .sw-sq { margin-right: 7px; vertical-align: -1px; }
.inv-table tr.inv-empty td { text-align: left; color: var(--muted); white-space: normal; }
.inv-shared td:nth-child(2) { min-width: 260px; color: var(--ink-2); }
.inv-shared td:nth-child(2) a { font-weight: 600; }
.inv-details { margin-top: 16px; }

/* ---------- other investors ---------- */
.inv-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
a.card.inv-other { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; }
.inv-other .card-title { font-size: 15px; }
.inv-other-v { font: 600 20px/1.2 var(--mono); letter-spacing: -0.04em; margin-top: 6px; }
.inv-links { margin: 16px 0 0; font-size: 15px; font-weight: 600; }

@media (max-width: 640px) {
  .inv-map { min-height: 360px; }
  .inv-cav { padding: 18px; }
  .inv-cav ul { font-size: 14px; }
  .inv-qbar { align-items: flex-start; }
  .inv-picker select { min-width: 0; }
  .inv-bars li { grid-template-columns: minmax(0, 1fr) 64px auto; }
  .inv-bar-full { display: none; }
  /* wide tables scroll sideways inside their card; the company column stays in view */
  .inv-table th, .inv-table td { padding: 8px 10px; }
  .inv-mv td:first-child, .inv-opt td:first-child, .inv-shared td:first-child { min-width: 150px; max-width: 190px; }
  .inv-hold td:nth-child(2) { min-width: 150px; max-width: 190px; }
  .inv-mv td:first-child, .inv-mv th:first-child, .inv-opt td:first-child, .inv-opt th:first-child,
  .inv-shared td:first-child, .inv-shared th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
  .inv-table thead th:first-child { z-index: 2; }
}