.table-wrap{
  --table-edge:var(--hair-d,var(--hair,#262E34));
  background:var(--gabbro,#12171B);
  border:1px solid var(--table-edge);
  margin:1.4em 0;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  position:relative;
  scrollbar-color:var(--flint,#6B767E) var(--whinstone,#1C2329);
  scrollbar-width:thin;
  width:100%;
  -webkit-overflow-scrolling:touch;
}
.table-wrap:focus-visible{
  outline:3px solid var(--inbound-d,var(--blue,#84B4FF));
  outline-offset:3px;
}
.table-wrap table{
  border-collapse:collapse;
  margin:0;
  min-width:100%;
  width:100%;
}
@media(max-width:760px){
  .table-wrap table{min-width:680px}
  .table-wrap.compact table{min-width:520px}
  .table-wrap.wide table{min-width:820px}
  .table-wrap::before{
    background:var(--whinstone,#1C2329);
    border-bottom:1px solid var(--table-edge);
    color:var(--ash,#8E9BA3);
    content:"Swipe table \2192";
    display:block;
    font-family:var(--mono,ui-monospace,monospace);
    font-size:12px;
    left:0;
    letter-spacing:.08em;
    padding:9px 12px;
    position:sticky;
    text-transform:uppercase;
    width:max-content;
    z-index:4;
  }
  .table-wrap th:first-child,
  .table-wrap td:first-child{
    box-shadow:4px 0 0 rgba(0,0,0,.16);
    left:0;
    max-width:190px;
    min-width:140px;
    position:sticky;
  }
  .table-wrap th:first-child{background:var(--whinstone,#1C2329);z-index:3}
  .table-wrap td:first-child{background:var(--gabbro,#12171B);z-index:2}
}