/* ============================================================
   INVESTRA - segment-page visuals (segviz.css, Round 17)
   Heat map (nbfc), score matrix (banks), spread engine + risk/return map (hfc-mfi).
   Colours come from the theme tokens (--teal / --coral mixed into the card colour), so both themes work.
   ============================================================ */
/* 7-step diverging scale, exchange-style: vivid red (weakest) .. slate (median) .. vivid green (strongest).
   Fixed colours with white type, the same in both themes, like a market heat map. */
.hx-sn3 { --hx: #c62f2a; --hx2: #a3221f; } .hx-sn2 { --hx: #d9534a; --hx2: #b83c34; } .hx-sn1 { --hx: #b4756c; --hx2: #94574f; }
.hx-s0  { --hx: #5d6475; --hx2: #4a5060; }
.hx-sp1 { --hx: #5c9a7d; --hx2: #457d63; } .hx-sp2 { --hx: #23a26a; --hx2: #188453; } .hx-sp3 { --hx: #0e8f53; --hx2: #0a6f40; }
.hx-sna { --hx: #3a3d47; --hx2: #2e3039; }
.hx-sn3, .hx-sn2, .hx-sn1, .hx-s0, .hx-sp1, .hx-sp2, .hx-sp3, .hx-sna { --hm: var(--hx); }

.hm { position: relative; }
.hx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.hx-measures { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--border); }
.hx-m { min-height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.hx-m:hover { color: var(--text); }
.hx-m[aria-checked="true"] { background: var(--bg-card); color: var(--gold); box-shadow: 0 1px 8px rgba(0, 0, 0, .25), inset 0 0 0 1px var(--border-gold); }
.hx-view { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); }
.hx-view button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.hx-view button[aria-pressed="true"] { background: var(--bg-card); color: var(--text); }
.hx-m:focus-visible, .hx-view button:focus-visible, .hx-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.hx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px; font-size: 11px; color: var(--text-muted); }
.hx-lg-sw { display: inline-flex; gap: 2px; }
.hx-lg-sw i { display: grid; place-items: center; min-width: 26px; height: 16px; padding: 0 4px; border-radius: 3px; background: var(--hx); color: #fff; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hx-lg-med { margin-left: auto; }
.hx-lg-med b { color: var(--text); font-family: var(--font-mono); }

.hx-body { display: flex; flex-direction: column; gap: 16px; }
.hx-gh { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.hx-gh b { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.hx-gh span { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.hx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 4px; }
.hx-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 4px; min-width: 0; min-height: 96px; padding: 9px 10px 9px; border-radius: 8px; text-decoration: none; color: #fff;
  background: linear-gradient(160deg, var(--hx) 0%, var(--hx2) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s; }
.hx-tile:hover, .hx-tile:focus-visible { transform: translateY(-2px) scale(1.03); z-index: 2; filter: brightness(1.08); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .35); outline: none; }
.hx-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.hx-tk { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: .03em; color: #fff; }
.hx-rk { flex: none; font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .72); }
.hx-v { font-family: var(--font-mono); font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
.hx-d { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .22); }
.hx-bar { display: block; height: 3px; border-radius: 3px; background: rgba(0, 0, 0, .25); overflow: hidden; }
.hx-bar s { display: block; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, .85); }
.hx-anim .hx-tile { animation: hmIn .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes hmIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.hx-note { margin-top: 10px; font-size: 11px; color: var(--text-muted); line-height: 1.5; }

.hx-tip { position: absolute; z-index: 30; width: 236px; padding: 10px 12px; border-radius: 12px; pointer-events: none; background: var(--bg-card); border: 1px solid var(--border-gold); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6); font-size: 11.5px; color: var(--text-sub); }
.hx-tip[hidden] { display: none; }
.hx-tip-h b { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.hx-tip-h span { display: block; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-tip-g { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-top: 8px; }
.hx-tip-g span { display: inline-flex; align-items: center; gap: 7px; }
.hx-tip-g span.on { color: var(--gold); font-weight: 700; }
.hx-tip-g i { width: 10px; height: 10px; border-radius: 3px; background: var(--hm); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.hx-tip-g b { font-family: var(--font-mono); color: var(--text); text-align: right; }
.hx-tip-f { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-muted); }

@media (max-width: 640px) {
  .hx-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 3px; }
  .hx-tile { min-height: 86px; padding: 8px; }
  .hx-v { font-size: 18px; }
  .hx-tk { font-size: 11px; }
  .hx-d { font-size: 9.5px; padding: 1px 5px; }
  .hx-lg-med { margin-left: 0; flex-basis: 100%; }
  .hx-lg-sw i { min-width: 20px; }
  .hx-m { padding: 0 10px; font-size: 12px; }
  .hx-tip { display: none; }
}
}
@media (prefers-reduced-motion: reduce) { .hx-anim .hx-tile { animation: none; } .hx-tile, .hx-m { transition: none; } }
@media print { .hx-anim .hx-tile { animation: none; } .hx-tip, .hx-bar { display: none; } }

/* ---------- score matrix (banks) ---------- */
.mx-sn3 { --mx: var(--coral); } .mx-sn2 { --mx: color-mix(in srgb, var(--coral) 78%, var(--text-muted)); } .mx-sn1 { --mx: color-mix(in srgb, var(--coral) 50%, var(--text-muted)); }
.mx-s0 { --mx: var(--text-muted); }
.mx-sp1 { --mx: color-mix(in srgb, var(--teal) 50%, var(--text-muted)); } .mx-sp2 { --mx: color-mix(in srgb, var(--teal) 78%, var(--text-muted)); } .mx-sp3 { --mx: var(--teal); }
.mx-sna { --mx: transparent; }
.mx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 0 12px; font-size: 11px; color: var(--text-muted); }
.mx-legend .mx-dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
.mx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mx-tbl { display: flex; flex-direction: column; min-width: 560px; }
.mx-row { display: grid; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 10px; color: inherit; text-decoration: none; transition: background .3s var(--ease-out), transform .3s var(--ease-out); }
a.mx-row:hover { background: color-mix(in srgb, var(--gold) 7%, transparent); }
a.mx-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
a.mx-row + a.mx-row { box-shadow: inset 0 1px 0 var(--border); }
.mx-head { position: sticky; top: 0; z-index: 2; padding-bottom: 8px; background: transparent; }
.mx-hn { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.mx-hc { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-sub); font: inherit; text-align: left; cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
.mx-hc b { font-size: 12px; font-weight: 700; }
.mx-hc small { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }
.mx-hc:hover { border-color: var(--border); color: var(--text); }
.mx-hc.on { background: var(--bg-input); border-color: var(--border-gold); color: var(--gold); }
.mx-hc:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.mx-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mx-rk { width: 20px; flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-align: right; }
.mx-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.mx-nt { display: flex; flex-direction: column; min-width: 0; }
.mx-nt b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 800; color: var(--text); }
.mx-nt small { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-c { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; border-radius: 8px; min-width: 0; }
.mx-c.on { background: color-mix(in srgb, var(--mx) 9%, transparent); }
.mx-v { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text); }
.mx-bar { position: relative; height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--text-muted) 16%, transparent); overflow: hidden; }
.mx-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--mx); transform-origin: left; transition: transform .9s var(--ease-out); }
.mx-grade { display: inline-block; min-width: 24px; padding: 1px 5px; border-radius: 999px; font-size: 10px; font-weight: 800; text-align: center; color: #fff; background: var(--gc, var(--gold)); }
.mx-anim .mx-row:not(.mx-head) { animation: hmIn .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
.mx-anim .mx-bar i { animation: mxGrow .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms + 120ms); }
@keyframes mxGrow { from { transform: scaleX(0); } to { transform: none; } }
@media (max-width: 640px) {
  .mx-tbl { min-width: 0; }
  .mx-row { grid-template-columns: repeat(var(--mxn, 4), minmax(0, 1fr)) !important; gap: 2px; padding: 8px 2px; }
  .mx-v { font-size: 11px; gap: 3px; flex-wrap: wrap; }
  .mx-grade { min-width: 0; padding: 0 4px; font-size: 9px; }
  .mx-hc b { font-size: 10.5px; }
  .mx-name, .mx-hn { grid-column: 1 / -1; }
  .mx-hn { display: none; }
  .mx-hc { padding: 5px 4px; }
  .mx-hc small { display: none; }
  .mx-hc b { font-size: 11px; }
  .mx-c { padding: 4px; }
}
@media (prefers-reduced-motion: reduce) { .mx-anim .mx-row, .mx-anim .mx-bar i { animation: none; } }
@media print { .mx-anim .mx-row, .mx-anim .mx-bar i { animation: none; } }

/* ---------- butterfly (hfc-mfi spread engine): pays <- spine -> keeps ---------- */
.bf { --bf-l: var(--coral); --bf-r: var(--teal); }
.bf-row { display: grid; grid-template-columns: 104px 1fr 1fr 8px; align-items: center; column-gap: 0; min-height: 30px; color: inherit; text-decoration: none; border-radius: 8px; transition: background .3s var(--ease-out); }
a.bf-row:hover { background: color-mix(in srgb, var(--gold) 7%, transparent); }
a.bf-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.bf-head { min-height: 0; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.bf-hl { text-align: right; padding-right: 10px; color: var(--bf-l); }
.bf-hr { padding-left: 10px; color: var(--bf-r); }
.bf-hl i, .bf-hr i { font-style: normal; }
.bf-group + .bf-group { margin-top: 10px; }
.bf-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0 6px; border-top: 1px solid var(--border); }
.bf-gh i { width: 9px; height: 9px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 8px var(--gc); }
.bf-gh b { font-size: 12px; color: var(--text); }
.bf-gh span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.bf-gh em { flex-basis: 100%; font-style: normal; font-size: 11px; color: var(--text-muted); }
.bf-t { padding-left: 8px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-l, .bf-r { position: relative; height: 18px; }
.bf-l { border-right: 1px solid var(--border-gold); }
.bf-bar { position: absolute; top: 2px; bottom: 2px; display: flex; align-items: center; border-radius: 4px; transition: transform .9s var(--ease-out); }
.bf-l .bf-bar { right: 0; justify-content: flex-start; border-radius: 4px 0 0 4px; background: linear-gradient(270deg, color-mix(in srgb, var(--bf-l) 40%, transparent), var(--bf-l)); transform-origin: right; }
.bf-r .bf-bar { left: 0; justify-content: flex-end; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bf-r) 40%, transparent), var(--bf-r)); transform-origin: left; }
.bf-bar em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; white-space: nowrap; color: var(--text); }
.bf-l .bf-bar em { transform: translateX(calc(-100% - 6px)); }
.bf-r .bf-bar em { transform: translateX(calc(100% + 6px)); }
.bf-med { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed color-mix(in srgb, var(--gc, var(--gold)) 85%, var(--text)); opacity: .75; z-index: 1; }
.bf-foot { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 10.5px; color: var(--text-muted); }
.bf-foot span { display: inline-flex; align-items: center; gap: 6px; }
.bf-mk { width: 0; height: 12px; border-left: 1.5px dashed var(--text-muted); }
.bf-anim a.bf-row { animation: hmIn .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 24ms); }
.bf-anim .bf-bar { animation: mxGrow .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 24ms + 120ms); }
.bf-vals { display: none; }
@media (max-width: 640px) {
  .bf-row { grid-template-columns: 1fr 1fr; row-gap: 3px; padding: 5px 2px; }
  .bf-head { padding: 0; }
  .bf-head > span:first-child, .bf-head > span:last-child { display: none; }
  .bf-t { grid-column: 1; grid-row: 1; font-size: 11px; padding-left: 2px; }
  .bf-vals { display: flex; grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 10px; padding-right: 6px; font-family: var(--font-mono); font-size: 10.5px; }
  .bf-vals .l { color: var(--bf-l); } .bf-vals .r { color: var(--bf-r); }
  .bf-l { grid-column: 1; grid-row: 2; } .bf-r { grid-column: 2; grid-row: 2; }
  .bf-bar em { display: none; }
  .bf-hl, .bf-hr { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .bf-anim a.bf-row, .bf-anim .bf-bar { animation: none; } }
@media print { .bf-anim a.bf-row, .bf-anim .bf-bar { animation: none; } }

/* entrance waits for the card's own reveal: paused (held on the first frame) until the card is .visible */
:is(.fade-up, .rv):not(.visible) :is(.hx-anim .hx-tile, .mx-anim .mx-row, .mx-anim .mx-bar i, .bf-anim a.bf-row, .bf-anim .bf-bar) { animation-play-state: paused; }

/* touch widths: every control is at least 44px tall */
@media (max-width: 1023.98px) {
  .hx-m, .hx-view button, .mx-hc { min-height: 46px; min-width: 48px; }
}