@layer features {
  .metric-strip {
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .metric-strip article {
    padding: 19px;
    border-right: 1px solid var(--line);
  }

  .metric-strip article:last-child {
    border: 0;
  }

  .metric-label {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
  }

  .metric-strip article > strong {
    display: block;
    margin: 11px 0 8px;
    font-size: 25px;
    letter-spacing: -.04em;
  }

  .metric-strip article > strong small {
    color: var(--muted);
    font-size: 11px;
  }

  .metric-strip article > p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 10px;
  }

  .metric-bar {
    height: 4px;
    background: #e8e4da;
    border-radius: 3px;
    overflow: hidden;
  }

  .metric-bar i {
    display: block;
    height: 100%;
    background: var(--amber);
  }

  .metric-bar.green i {
    background: var(--green);
  }

  .analytics-ranking {
    padding: 20px;
  }

  .ranking-list {
    margin: 13px -20px -20px;
  }

  .ranking-row {
    height: 56px;
    padding: 0 19px;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 9px;
    border-top: 1px solid var(--line);
  }

  .ranking-row:hover {
    background: var(--surface-soft);
  }

  .rank {
    color: var(--faint);
    font-size: 11px;
  }

  .ranking-row strong,
  .ranking-row small {
    display: block;
  }

  .ranking-row strong {
    margin-bottom: 2px;
    font-size: 12px;
  }

  .ranking-row small {
    color: var(--muted);
    font-size: 10px;
  }

  .impact {
    color: var(--amber);
    font-size: 10px;
  }

  .impact.high {
    color: var(--red);
  }

  @media (max-width: 980px) {
    .metric-strip {
      grid-template-columns: 1fr 1fr;
    }

    .metric-strip article:nth-child(2) {
      border-right: 0;
    }

    .metric-strip article:nth-child(-n + 2) {
      border-bottom: 1px solid var(--line);
    }
  }

  @media (max-width: 680px) {
    .metric-strip {
      grid-template-columns: 1fr;
    }

    .metric-strip article {
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }
  }
}