@layer components {
  .package-index-hero {
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    background: var(--pw-bg-app);
  }

  .package-index-hero__inner {
    display: grid;
    gap: 1.25rem;
    max-inline-size: 52rem;

    & h1 {
      font-size: clamp(3.25rem, 7vw, 5.75rem);
      font-weight: 300;
      letter-spacing: var(--pw-track-tight);
      line-height: .95;
      text-wrap: balance;
    }

    & .lead {
      max-inline-size: 44rem;
      margin: 0;
      text-wrap: pretty;
    }
  }

  .package-index-list {
    padding-block-start: clamp(3.5rem, 7vw, 5.5rem);
    border-block-start: 0;
  }

  .package-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    max-inline-size: 64rem;
  }
  .package-hero .hero__title {
    font-size: clamp(3rem, 6vw, 5.25rem);
    overflow-wrap: anywhere;
  }
  .package-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .75rem;
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-xs);
    color: var(--pw-fg-faint);

    & span + span::before {
      content: '/';
      margin-inline-end: .75rem;
      color: var(--pw-border-strong);
    }
  }

  .package-hero .install {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-inline-size: min(100%, 42rem);
    padding: .75rem 1rem;
    border-radius: var(--pw-r-md);
    background: var(--pw-bg-nav);
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-sm);

    & .install__cmd {
      min-inline-size: 0;
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: thin;
    }
    & .prompt { color: var(--pw-fg-faint); user-select: none; }
    & .install__copy {
      flex-shrink: 0;
      padding: .35rem .5rem;
      color: var(--pw-primary-soft);
      font-size: var(--pw-fs-xs);
    }
    & .install__copy:hover { color: var(--pw-fg-strong); }
  }

  .package-hero__links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;

    & a {
      padding-block: .5rem;
      color: var(--pw-fg-meta);
      font-size: var(--pw-fs-sm);
      transition: color .18s ease;
    }
    & a:hover { color: var(--pw-primary-soft); }
  }

  .pkg-table {
    inline-size: 100%;
    max-inline-size: 68rem;
    margin-inline: auto;
    border-collapse: separate;
    border-spacing: 0 .45rem;
    font-size: var(--pw-fs-sm);

    & th, & td { text-align: start; padding: 1rem 1.1rem; }
    & thead th {
      padding-block: 0 .55rem;
      font-family: var(--pw-font-mono);
      font-size: var(--pw-fs-2xs);
      letter-spacing: var(--pw-track-eyebrow);
      text-transform: uppercase;
      font-weight: 400;
      color: var(--pw-fg-faint);
    }
    & tbody :is(th, td) { background: color-mix(in oklch, var(--pw-card-flat) 62%, transparent); }
    & tbody tr > :first-child { border-radius: var(--pw-r-md) 0 0 var(--pw-r-md); }
    & tbody tr > :last-child { border-radius: 0 var(--pw-r-md) var(--pw-r-md) 0; }
    & tbody tr:hover :is(th, td) { background: color-mix(in oklch, var(--pw-card-flat) 84%, var(--pw-primary)); }
    & td { color: var(--pw-fg-meta); }
    & :is(td, thead th):not(:first-child) { inline-size: 1%; white-space: nowrap; }
  }
  .pkg-table__name {
    font-weight: 400;
    & a {
      font-family: var(--pw-font-mono);
      color: var(--pw-fg-strong);
      &:hover { color: var(--pw-primary-soft); }
    }
  }
  .pkg-table__composer {
    font-family: var(--pw-font-mono);
    & a { color: var(--pw-fg-faint); }
    & strong { color: var(--pw-fg-strong); font-weight: 450; }
    & a:hover strong { color: var(--pw-primary-soft); }
  }
  .pkg-table__num { font-variant-numeric: tabular-nums; }
  .pkg-status {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-xs);
    color: var(--pw-fg-meta);
  }
  .pkg-status--released { color: var(--pw-success); }
  .pkg-status--experimental { color: var(--pw-primary-soft); }

  @media (width <= 46rem) {
    .package-index-hero { padding-block: 2.75rem 3.5rem; }
    .package-index-list { padding-block-start: 3rem; }
    .package-index-list .table-scroll { overflow: visible; }
    .pkg-table {
      display: block;
      border-spacing: 0;

      & thead { display: none; }
      & tbody { display: grid; gap: .75rem; }
      & tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem 1rem;
        padding: 1rem;
        border-radius: var(--pw-r-md);
        background: color-mix(in oklch, var(--pw-card-flat) 62%, transparent);
      }
      & tbody :is(th, td) {
        display: grid;
        gap: .25rem;
        inline-size: auto;
        padding: 0;
        border-radius: 0;
        background: transparent;
        white-space: normal;
      }
      & tbody tr:hover :is(th, td) { background: transparent; }
      & tbody :is(th, .pkg-table__composer) { grid-column: 1 / -1; }
      & td::before {
        content: attr(data-label);
        font-family: var(--pw-font-mono);
        font-size: var(--pw-fs-2xs);
        letter-spacing: var(--pw-track-eyebrow);
        text-transform: uppercase;
        color: var(--pw-fg-faint);
      }
    }
  }
}