.ui-rows { list-style: none; margin: 0; padding: 0; }

.ui-row {
  position: relative;
  display: block;   padding: 14px 28px 14px 4px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
}
.ui-row:hover { background: var(--paper-2); color: var(--ink); }
.ui-row:visited .ui-row__title { color: var(--visited); }
.ui-row__arrow { position: absolute; right: 6px; top: calc(14px + (var(--t-read) * 1.5 - 16px) / 2); color: var(--ink-2); transition: transform var(--dur-2) ease; }
.ui-row:hover .ui-row__arrow { transform: translateX(3px); }

.ui-row__title { font-size: var(--t-read); font-weight: 700; letter-spacing: -0.005em; display: block; }
.ui-row__title mark { background: var(--highlight); color: var(--on-highlight); border-radius: 4px; padding: 0 2px; }

.ui-row__company, .ui-row__where, .ui-row__pay, .ui-row__added { font-size: 0.875rem; color: var(--ink-soft); display: inline; }
.ui-row__where::before, .ui-row__pay::before, .ui-row__added::before { content: " · "; color: var(--ink-2); }
.ui-row__where-long, .ui-row__more { display: none; }
.ui-row__pay.is-none { display: none; }
.ui-row__added { color: var(--ink-2); }

.ui-rows__head { display: none; }

@media (min-width: 900px) {
  .ui-row, .ui-rows__head {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1.1fr) minmax(0, 1.7fr) minmax(0, 1.1fr) 64px;
    gap: 18px;
    align-items: baseline;
  }
  .ui-row__company, .ui-row__where, .ui-row__pay, .ui-row__added { display: block; }
  .ui-row__where::before, .ui-row__pay::before, .ui-row__added::before { content: none; }
  .ui-row__where-long { display: inline; }
  .ui-row__where-short { display: none; }
  .ui-row__more { display: inline; color: var(--ink-2); }
  .ui-row__pay { font: 0.875rem var(--mono); }
  .ui-row__pay.is-none { display: block; color: var(--ink-2); font-family: var(--sans); }
  .ui-row__added { font: 0.8125rem var(--mono); text-align: right; }

  .ui-rows__head {
    display: grid;
    font: 0.75rem var(--mono);
    color: var(--ink-2);
    padding: 10px 28px 8px 4px;
    border-bottom: 1.5px solid var(--ink);
    background: var(--paper);
  }
  .ui-rows__head-end { text-align: right; }
    .ui-rows__head--sticky { position: sticky; top: var(--bar-h); z-index: 5; }
}

.ui-row--skeleton { pointer-events: none; }
.ui-row--skeleton .ui-skel { display: block; height: 14px; border-radius: 4px; background: var(--paper-2); margin: 4px 0; animation: ui-skel 1.4s ease-in-out infinite; }
.ui-row--skeleton .ui-skel--title { height: 18px; width: 70%; }
@keyframes ui-skel { 50% { opacity: 0.5; } }