/* vertical only: the shorthand used to zero .wrap's side padding */
.listpage { padding-top: calc(var(--u)*7); padding-bottom: 100px; }
.listhead { max-width: 640px; margin-bottom: calc(var(--u)*6); }
.listhead p { margin-top: calc(var(--u)*3); }

.toolbar { display: flex; gap: var(--u); margin: calc(var(--u)*5) 0 calc(var(--u)*4); flex-wrap: wrap; }
.toolbar input { flex: 1 1 260px; }
.sorts { display: flex; gap: 0; }
.sorts .btn { border-left-width: 0; }
.sorts .btn:first-child { border-left-width: 1px; }
.sorts .btn[aria-pressed="true"] { background: var(--yellow); color: #000; border-color: var(--yellow); }

.tablewrap { border: 1px solid var(--line); }
.etable { width: 100%; border-collapse: collapse; font-size: 14px; }
.etable th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); text-align: left; font-weight: 400;
  padding: 10px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap;
  position: sticky; top: var(--rail); background: var(--pit); z-index: 5;
}
/* phones: the table scrolls sideways in its own box, so the header can't stick */
@media (max-width: 760px) { .tablewrap { overflow-x: auto; } .etable th { position: static; } }
.etable td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.etable tr:last-child td { border-bottom: 0; }
.etable tbody tr { cursor: pointer; }
.etable tbody tr:hover td { background: var(--raise); }
.ra { text-align: right; }
.etable td.ra { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eq { color: var(--ink); }
.eq:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.epn { font-family: var(--mono); color: var(--dim); font-size: 12px; }
.where { color: var(--dim); font-size: 12px; font-family: var(--mono); white-space: nowrap; }
.sbar { display: inline-block; width: 42px; height: 7px; background: var(--pit); border: 1px solid var(--line-2); vertical-align: middle; margin-right: 7px; }
.sbar i { display: block; height: 100%; }
#count { margin-top: calc(var(--u)*3); }
@media (max-width: 760px) { .etable .hideS { display: none; } }
.etable .ctx { font-family: var(--mono); font-size: 10px; color: var(--yellow); text-transform: uppercase; margin-left: 6px; }

.sorts .btn[data-dir]:not([data-dir=""])::after { content: attr(data-dir); margin-left: 6px; opacity: .75; }
a.eq:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }