/* ============================================================
   INVESTRA - phone visuals (mobile-viz.css, Round 21). Shown only on phones; PC keeps its charts.
   ============================================================ */
.m-viz, .m-txt { display: none; }
@media (max-width: 640px) {
  .m-viz { display: block; margin-top: 6px; }
  .m-txt { display: inline; }
  .has-mviz .d-txt, .has-mviz > .chart-canvas-wrap { display: none !important; }
}

/* R22: segment leaderboard (Apple Screen Time style) */
.mv-lb { display: flex; flex-direction: column; gap: 12px; }
.mv-lb-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
.mv-lb-seg button { position: relative; min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--text-sub); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.mv-lb-seg button::after { content: ""; position: absolute; inset: -4px 0; }   /* R23: a 44 px finger target around the 36 px pill */
.mv-lb-seg button[aria-checked="true"] { color: var(--text); background: var(--bg-card); box-shadow: 0 2px 8px rgba(0, 0, 0, .18), 0 0 0 .5px color-mix(in srgb, var(--text-muted) 30%, transparent); }
.mv-lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--bg-input); border: 1px solid var(--border); }
.mv-lb-r { position: relative; transition: transform .55s cubic-bezier(.2, .9, .2, 1); }
.mv-lb-r + .mv-lb-r::before { content: ""; position: absolute; left: 46px; right: 0; top: 0; height: 1px; background: var(--border); }
.mv-lb-r a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 14px; grid-template-areas: "k n v go" "k b b go"; align-items: center; column-gap: 10px; row-gap: 8px; padding: 12px 12px 13px 10px; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.mv-lb-r a:active { background: color-mix(in srgb, var(--text-muted) 10%, transparent); }
.mv-lb-k { grid-area: k; align-self: start; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 800; color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.mv-lb-r.lead .mv-lb-k { color: #1a1408; background: linear-gradient(180deg, #f8e6ae, #e0bb5c); }
.mv-lb-n { grid-area: n; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 1px; min-width: 0; }   /* R23: on a 360 px phone the count drops below the name instead of cutting it */
.mv-lb-n i { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 70%, transparent); }
.mv-lb-n b { flex: none; max-width: calc(100% - 16px); font-size: 14.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-lb-n small { flex: none; font-size: 11px; color: var(--text-muted); }
.mv-lb-v { grid-area: v; font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mv-lb-r.lead .mv-lb-v { color: var(--gold); }
.mv-lb-b { grid-area: b; position: relative; display: block; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.mv-lb-b s { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 999px; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), var(--c)); transition: transform .9s cubic-bezier(.2, .9, .2, 1) var(--d, 0ms); }
.mv-in .mv-lb-b s { transform: scaleX(var(--w, 0)); }
.mv-lb-avg { position: absolute; top: -5px; bottom: -5px; left: var(--a, 0); width: 0; border-left: 1.5px dashed color-mix(in srgb, var(--text) 55%, transparent); transition: left .6s cubic-bezier(.2, .9, .2, 1); }
.mv-lb-go { grid-area: go; width: 14px; height: 14px; color: var(--text-muted); opacity: .7; }
.mv-lb-foot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.mv-lb-foot i { flex: none; width: 16px; height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--text) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .mv-lb-r, .mv-lb-b s, .mv-lb-avg, .mv-lb-seg button { transition: none; } }

/* quadrant map: four tappable corners, the picked one lists its companies below */
.mv-quad { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px; }
.mv-ax-y { grid-row: 1; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.mv-grid { grid-row: 1; grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mv-ax-x { grid-row: 2; grid-column: 2; text-align: right; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.mv-q { --t: var(--text-muted); position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; min-height: 96px; padding: 11px 11px 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--t) 28%, var(--border)); background: color-mix(in srgb, var(--t) 6%, var(--bg-input)); color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.mv-q:active { transform: scale(.97); }
.mv-q.on { border-color: color-mix(in srgb, var(--t) 75%, transparent); background: color-mix(in srgb, var(--t) 14%, var(--bg-input)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--t) 45%, transparent), 0 10px 26px -14px var(--t); }
.mv-q:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }
.mv-t-g { --t: var(--teal); } .mv-t-a { --t: var(--gold); } .mv-t-r { --t: var(--coral); } .mv-t-n { --t: var(--text-muted); }
.mv-q-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.mv-q-h b { font-size: 11.5px; line-height: 1.3; font-weight: 700; color: var(--t); }
.mv-t-n .mv-q-h b { color: var(--text); }
.mv-q-n { flex: none; font-family: var(--font-mono); font-size: 22px; line-height: 1; font-weight: 800; color: var(--text); }
.mv-q-d { display: flex; flex-wrap: wrap; gap: 3px; }
.mv-q-d i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: .9; }
.mv-ql { margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--bg-input); border: 1px solid var(--border); }
.mv-ql-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.mv-ql-h b { --t: var(--text); font-size: 13px; color: var(--t); }
.mv-ql-h span { font-size: 11px; color: var(--text-muted); }
.mv-q-c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mv-q-c .mv-none { grid-column: 1 / -1; }
.mv-chip { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 36px; padding: 4px 10px; border-radius: 999px; text-decoration: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); }
.mv-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 6px var(--c); }
.mv-chip small { margin-left: auto; min-width: 0; font-size: 10px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-ql.in .mv-chip, .mv-ql.in .mv-ql-h { animation: mvIn .42s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes mvIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mv-none { font-size: 11.5px; color: var(--text-muted); }
.mv-note { margin-top: 10px; font-size: 11px; line-height: 1.45; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .mv-ql.in .mv-chip, .mv-ql.in .mv-ql-h { animation: none; } .mv-q { transition: none; } }

/* P/B pairs */
.mv-pb { display: flex; flex-direction: column; gap: 6px; }
.mv-pb-leg { display: flex; gap: 14px; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.mv-pb-leg span { display: inline-flex; align-items: center; gap: 6px; }
.mv-pb-leg i { width: 14px; height: 6px; border-radius: 3px; background: var(--text-muted); }
.mv-pb-leg i.f { background: color-mix(in srgb, var(--text-muted) 35%, transparent); }
.mv-pb-r { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; text-decoration: none; color: inherit; background: var(--bg-input); border: 1px solid var(--border); }
.mv-pb-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 800; color: var(--text); }
.mv-pb-t i { display: none; }
.mv-pb-t small { font-family: var(--font-sans, inherit); font-size: 10px; font-weight: 600; }
.mv-pb-t small.up { color: var(--teal); } .mv-pb-t small.dn { color: var(--coral); }
.mv-pb-bars { display: flex; flex-direction: column; gap: 4px; }
.mv-pb-a, .mv-pb-f { position: relative; display: block; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--text-muted) 10%, transparent); }
.mv-pb-a s, .mv-pb-f s { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.mv-pb-a s { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, transparent), var(--c)); }
.mv-pb-f s { background: color-mix(in srgb, var(--c) 30%, transparent); }
.mv-pb-a em, .mv-pb-f em { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text); }
.mv-pb-r.mv-more { display: none; }
.mv-open .mv-pb-r.mv-more { display: grid; }
.mv-pb-all { align-self: center; margin-top: 4px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border-gold); background: var(--bg-input); color: var(--gold); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* R23: a chip with numbers takes two lines, so the values are never cut off */
.mv-chip:has(small) { flex-wrap: wrap; row-gap: 1px; border-radius: 12px; padding: 6px 10px; }
.mv-chip:has(small) small { flex-basis: 100%; margin-left: 13px; white-space: normal; overflow: visible; }

/* R23: long lists start short on phones */
.mv-more-row { display: none; }
@media (max-width: 640px) {
  .mv-more-row { display: flex; justify-content: center; margin-top: 10px; }
  .mv-more-row[hidden] { display: none; }
  table.mv-collapse[data-mv-rows="5"]:not(.mv-open) tbody tr:nth-child(n+6),
  table.mv-collapse[data-mv-rows="8"]:not(.mv-open) tbody tr:nth-child(n+9) { display: none; }
  .mv-ql:not(.mv-open) .mv-chip:nth-child(n+9) { display: none; }
  .mv-q-all { display: block; margin: 10px auto 0; }
}