.matrix-scroll{max-height:80vh;overflow:auto;border:1px solid #cbd6df;border-radius:8px;background:#fff;isolation:isolate}
#matrix-table{--matrix-font:13px;width:100%;border-collapse:separate;border-spacing:0;font-size:var(--matrix-font);line-height:1.65}
#matrix-table th,#matrix-table td{padding:4px 5px;border-bottom:1px solid #d8e0e6;border-left:1px solid #e1e7ed;text-align:center;white-space:nowrap;font-size:inherit;line-height:1.4}
#matrix-table thead th{position:sticky;top:0;z-index:3;background:#dce7ef;color:#173c54;font-weight:700}
#matrix-table tbody tr:nth-child(odd)>*{background:#fff}
#matrix-table tbody tr:nth-child(even)>*{background:#eef1f4}
#matrix-table tbody tr:hover>*{background:#dcecf8}
#matrix-table tr>:first-child{position:sticky;right:0;z-index:2;text-align:right;border-left:2px solid #becdda;min-width:95px}
#matrix-table thead tr>:first-child{z-index:5;background:#dce7ef}
#matrix-table .matrix-suggestion{border-right:2px solid #78a28c;color:#16623f;background:#eaf4ed;font-weight:700}
#matrix-table tbody tr:hover>.matrix-suggestion{background:#d2e9dc}
#matrix-table .matrix-net{color:#1a6449}
#matrix-table .matrix-outdated,#matrix-table .matrix-outdated .matrix-net{color:#7b6956}
#matrix-table small{display:block;font-size:.9em;font-weight:400;line-height:1.5}
#matrix-table .matrix-missing{color:#a1adb8}
#matrix-size{padding:0;min-height:30px;accent-color:#155b8c}
#price-tooltip{position:fixed;z-index:1000;max-width:min(360px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;background:#173c54;color:#fff;border:1px solid #7092aa;border-radius:8px;padding:12px 16px;box-shadow:0 4px 18px #0003;white-space:pre-line;direction:rtl;text-align:right;font:14px/1.9 Tahoma,Arial,sans-serif}
#matrix-table [data-price-tip]{cursor:help}
main:has(#matrix:not([hidden])){max-width:none;padding:16px 12px 30px}
#matrix .title{margin-bottom:8px}
#matrix .title h1{font-size:22px}
#matrix .title p{margin:4px 0;font-size:14px}
#matrix .toolbar{margin:8px 0;gap:12px}
#matrix .toolbar label{margin-bottom:0}
#matrix .hint{font-size:13px;margin:6px 0 10px}
/* Keep the scroll viewport within the page; pin opaque row headings above cells. */
#matrix{min-width:0;max-width:100%}
.matrix-scroll{width:100%;max-width:100%;position:relative;direction:rtl;overscroll-behavior-x:contain}
#matrix-table{width:max-content;min-width:100%;direction:rtl}
#matrix-table tbody th[scope="row"]{position:-webkit-sticky;position:sticky;right:0;left:auto;z-index:4;background:#fff;box-shadow:-2px 0 3px #173c5420}
#matrix-table tbody tr:nth-child(even)>th[scope="row"]{background:#eef1f4}
#matrix-table tbody tr:hover>th[scope="row"]{background:#dcecf8}
#matrix-table tbody th[scope="row"] span{display:inline-block;direction:ltr;unicode-bidi:isolate}
#matrix-table .purchase-info{font:inherit;font-weight:700;color:inherit;background:transparent;border:0;padding:0;margin:0;cursor:help;white-space:inherit;overflow-wrap:anywhere}
#matrix-table thead tr>:first-child{right:0;top:0;z-index:8;background:#dce7ef}
@media(max-width:700px){
 main:has(#matrix:not([hidden])){width:100%;padding:10px 6px 24px}
 #matrix .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 #matrix .toolbar>*{min-width:0;width:100%}
 #matrix .toolbar>.grow{grid-column:1/-1}
 #matrix .toolbar input,#matrix .toolbar select{font-size:16px;min-height:44px}
 #matrix .title{gap:6px}
 #matrix .title button{min-height:44px}
 #matrix .hint{line-height:1.7}
 .matrix-scroll{max-height:65vh;max-height:65dvh;border-radius:5px}
 #matrix-table tr>:first-child{min-width:78px;max-width:116px}
 #matrix-table tbody th[scope="row"]{white-space:normal;overflow-wrap:anywhere}
 #matrix-table th,#matrix-table td{padding:7px 5px}
}

#matrix-table .matrix-actions button{font:inherit;padding:4px 6px;margin:0 2px;min-height:30px}
@media(max-width:700px){#matrix-table .matrix-actions button{min-height:44px}}