/* market page matrix: light, same type as the rest of the app; every cell has the same fixed size whatever the table holds */
.mx { margin: 10px 0 30px; font-family: system-ui, sans-serif; color: #222; }
.mx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.mx-kicker { font-size: 12px; color: #666; }
.mx-title { font-size: 15px; font-weight: 600; margin-top: 2px; }
.mx-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mx-chip { border: 1px solid #ddd; background: #fafafa; color: #555; font-size: 12px; padding: 5px 10px; border-radius: 4px; }
.mx-scroll { overflow: auto; max-height: 78vh; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; }
/* a slim light horizontal bar under the table; the vertical one (width 0) and the ones inside cells stay hidden. No `scrollbar-width`: it would override these. */
.mx-scroll::-webkit-scrollbar:horizontal { height: 10px; }
.mx-scroll::-webkit-scrollbar:vertical { width: 0; display: none; }
.mx-scroll::-webkit-scrollbar-track { background: #f5f5f5; }
.mx-scroll::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 5px; border: 2px solid #f5f5f5; }
.mx-scroll::-webkit-scrollbar-thumb:hover { background: #b5b5b5; }
.mx-in::-webkit-scrollbar { display: none; }
.mx-table { border-collapse: separate; border-spacing: 3px; table-layout: fixed; width: max-content; }
.mx-table th, .mx-table td { width: 116px; min-width: 116px; max-width: 116px; padding: 0; font-weight: 400; }
.mx-table th { position: sticky; top: 0; z-index: 3; background: #fff; height: 62px; }
.mx-table td { height: 64px; }
.mx-table .mx-corner, .mx-table .mx-rank { position: sticky; left: 0; z-index: 4; background: #fff; width: 40px; min-width: 40px; max-width: 40px; text-align: center; color: #6b6b6b; font-size: 12px; }
.mx-table .mx-corner { z-index: 6; }
.mx-in { height: 100%; max-height: 64px; overflow-y: auto; scrollbar-width: none; overflow-wrap: anywhere; word-break: break-word; white-space: normal; padding: 6px 4px; box-sizing: border-box; text-align: center; line-height: 1.35; }
th .mx-in { max-height: 62px; padding: 4px 2px; }
.mx-top { font-weight: 600; font-size: 13px; } .mx-mid { margin-top: 2px; font-size: 11px; color: #666; } .mx-year { font-size: 11px; color: #707070; }
.mx-cell { border: 1px solid #e5e5e5; border-radius: 4px; background: #fff; }
.mx-cell.hl { border: 2px solid var(--rv-ink); }
.mx-empty { background: #fafafa; border: 1px solid #f0f0f0; border-radius: 4px; }
.mx-sym { font-weight: 600; font-size: 13px; } .mx-val { font-size: 12px; font-weight: 600; } .mx-sub { font-size: 11px; color: #6b6b6b; }