/* Discover, lists and the live feed. */

@layer views {
  .v-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--sp-2);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .v-discover__hero,
  .v-pagehead {
    margin-bottom: var(--sp-4);
  }

  .v-discover__hero {
    padding: var(--sp-4);
    background:
      linear-gradient(120deg, var(--accent-soft), transparent 55%),
      color-mix(in oklab, var(--bg-1) 70%, transparent);
  }

  .v-discover__hero h1,
  .v-pagehead h1,
  .v-station h1 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
  }

  .v-discover__hero p,
  .v-count { color: var(--text-dim); }

  .v-discover__hero .btn { margin-top: var(--sp-3); }

  .v-chips, .v-orders {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-3) 0;
  }

  .section { margin-bottom: var(--sp-5); }
  .c-carousel__track { display: flex; gap: var(--sp-3); }
  .c-carousel__item { flex: 0 0 168px; }

  .v-list, .v-live, .v-search, .v-browse, .v-library, .v-settings, .v-stats, .v-add, .v-station {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .v-live__rate {
    font-family: var(--font-mono);
    color: var(--accent);
  }

  .v-globe {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: var(--sp-3);
    pointer-events: auto;
  }

  html[data-mode='desktop'] .v-globe { display: none; }
}