/* Mobile category filter and app list. */

.category-filter {
  padding: .5rem .8rem .75rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.category-filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .4rem;
}

.category-filter li a {
  display: block;
  padding: .25rem .5rem;
  font-size: .6rem;
  color: #728397;
  border-radius: .3rem;
}

.category-filter .is-active {
  color: var(--brand);
  background: var(--brand-soft);
}

.category-filter .category-more {
  color: var(--brand);
}

.sort-tabs {
  display: flex;
  gap: 1.2rem;
  padding: .7rem .9rem .4rem;
  color: var(--muted);
}

.sort-tabs a {
  display: block;
  padding-bottom: .3rem;
  border-bottom: 2px solid transparent;
}

.sort-tabs .is-active a {
  color: var(--ink);
  font-weight: 600;
  border-color: var(--brand);
}

.app-list {
  margin: .3rem .8rem;
  padding: 0 .8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.app-list li {
  display: grid;
  grid-template-columns: 2.8rem minmax(0,1fr) auto;
  gap: .7rem;
  align-items: center;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}

.app-list li:last-child {
  border: 0;
}

.app-cover {
  grid-column: 1;
  grid-row: 1;
}

.app-cover img {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .65rem;
}

.app-list .app-info {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}

.app-list .app-info>div>a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .75rem;
  font-weight: 550;
  line-height: 1.45;
}

.app-list dl {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .5rem;
  margin-top: .3rem;
  color: var(--muted);
  font-size: .5rem;
}

.app-download {
  grid-column: 3;
  grid-row: 1;
  padding-inline: .6rem;
}

.category-page {
  padding: 1rem .8rem;
}

.category-page h1 {
  font-size: 1rem;
  margin-bottom: .8rem;
}

.all-category {
  display: block;
  padding: .65rem;
  border-radius: .4rem;
  background: var(--brand);
  color: #fff;
  text-align: center;
}

.category-page ul {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .6rem;
  margin-top: .7rem;
}

.category-page li a {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: #fff;
}

.category-page strong {
  font-weight: 550;
}

.category-page li span {
  color: var(--muted);
  font-size: .55rem;
}