@layer components {



  .parity__versions,
  .parity__summary,
  .parity__list { border-top: 0; }


  .parity__versions { padding-block: 0; }


  .parity__versions-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2.5rem;
    margin: 0;
    padding-block: 1.75rem .5rem;
  }

  .parity__version { display: flex; align-items: baseline; gap: .6rem; }

  .parity__version dt {
    font-family: var(--pw-font-mono);
    font-size: .72rem;
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-fg-faint);
  }

  .parity__version dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--pw-fg-strong);
  }



  .parity__summary { padding-block-start: 0; }

  .parity__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    background: var(--pw-border-soft);
    border: 1px solid var(--pw-border-soft);
    border-radius: var(--pw-r-lg);
    overflow: hidden;
  }

  .parity__stat {
    display: grid;
    gap: .35rem;
    padding: 1.5rem 1.25rem;
    background: var(--pw-bg-panel);
    text-align: center;
    justify-items: center;
  }

  .parity__stat-value {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: var(--pw-track-tight);
    color: var(--pw-fg-strong);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .parity__stat-unit { font-size: 1.3rem; color: var(--pw-fg-faint); }

  .parity__stat-label { font-size: .85rem; color: var(--pw-fg-meta); }

  .parity__legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .6rem 2rem;
    margin: 1.75rem 0 0;
  }

  .parity__legend-item {
    display: flex;
    align-items: baseline;
    gap: .6rem;
  }

  .parity__legend dt { flex: none; }
  .parity__legend dd { margin: 0; font-size: .82rem; color: var(--pw-fg-meta); }



  .parity__list { padding-block-start: 0; }


  .parity__classes {
    border: 1px solid var(--pw-border-soft);
    border-radius: var(--pw-r-lg);
    background: var(--pw-bg-panel);
    overflow: hidden;
  }

  .parity-class + .parity-class { border-block-start: 1px solid var(--pw-border-soft); }

  .parity-class__summary {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1.1rem;
    cursor: pointer;
    list-style: none;
    transition: background .15s;
  }
  .parity-class__summary::-webkit-details-marker { display: none; }
  .parity-class__summary:hover { background: var(--pw-bg-subtle); }

  .parity-class__chevron {
    inline-size: .55rem;
    block-size: .55rem;
    border-inline-end: 1.5px solid var(--pw-fg-faint);
    border-block-end: 1.5px solid var(--pw-fg-faint);
    rotate: -45deg;
    transition: rotate .18s ease;
    flex: none;
  }
  .parity-class[open] > .parity-class__summary .parity-class__chevron { rotate: 45deg; }

  .parity-class__name {
    font-family: var(--pw-font-mono);
    font-size: .95rem;
    font-weight: 700;
    color: var(--pw-fg-strong);
  }

  .parity-class__php {
    font-family: var(--pw-font-mono);
    font-size: .76rem;
    color: var(--pw-primary-soft);
  }

  .parity-class__score {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    white-space: nowrap;
  }


  .parity-class__count {
    min-inline-size: 3.2rem;
    text-align: end;
    font-size: .78rem;
    color: var(--pw-fg-meta);
    font-variant-numeric: tabular-nums;
  }

  .parity-class__note {
    font-size: .78rem;
    color: var(--pw-fg-faint);
  }

  .parity-class__summary--leaf { cursor: default; margin: 0; }
  .parity-class__summary--leaf:hover { background: none; }
  .parity-class__chevron--none { border: 0; }


  .parity__meter {
    display: inline-block;
    inline-size: 12rem;
    block-size: .7rem;
    border-radius: var(--pw-r-pill);
    background: var(--pw-bg-nav);
    overflow: hidden;
  }

  .parity__meter-fill {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: var(--pw-success);
  }

  .parity__meter-fill--mid { background: #e0b54c; }
  .parity__meter-fill--low { background: var(--pw-secondary); }



  .parity {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
  }


  .parity thead th {
    padding: .6rem 1.1rem;
    text-align: start;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-fg-faint);
    background: var(--pw-bg-panel);
    border-block-end: 1px solid var(--pw-border-soft);
  }

  .parity td { padding: .45rem 1.1rem; }

  .parity__row { border-block-start: 1px solid var(--pw-border); }
  .parity__row:first-child { border-block-start: 0; }
  .parity__row:hover td { background: var(--pw-bg-subtle); }

  .parity__member code, .parity__php code {
    font-family: var(--pw-font-mono);
    font-size: .82rem;
    color: var(--pw-fg-subtle);
  }

  .parity__row--missing .parity__member code { color: var(--pw-fg-meta); }
  .parity__row--js-only td, .parity__row--discouraged td { color: var(--pw-fg-faint); }
  .parity__row--js-only .parity__member code, .parity__row--discouraged .parity__member code { color: var(--pw-fg-faint); }

  .parity__deprecated { text-decoration: line-through; text-decoration-color: var(--pw-fg-faint); }

  .parity__kind, .parity__since {
    font-size: .78rem;
    color: var(--pw-fg-faint);
    white-space: nowrap;
  }

  .parity__php code { color: var(--pw-primary-soft); }
  .parity__none { color: var(--pw-fg-faint); }

  .parity__status-col { text-align: end; white-space: nowrap; }

  .parity__badge {
    display: inline-block;
    padding: .12rem .55rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    border-radius: var(--pw-r-pill);
    border: 1px solid var(--pw-border-soft);
    color: var(--pw-fg-meta);
  }

  .parity__badge--covered { color: var(--pw-success); border-color: color-mix(in srgb, var(--pw-success) 35%, transparent); }
  .parity__badge--missing { color: var(--pw-ill-red); border-color: color-mix(in srgb, var(--pw-ill-red) 35%, transparent); }
  .parity__badge--js { color: var(--pw-fg-faint); border-style: dashed; }
  .parity__badge--discouraged { color: var(--pw-secondary-soft); border-style: dashed; border-color: color-mix(in srgb, var(--pw-secondary) 30%, transparent); }
  .parity__badge--deprecated { color: var(--pw-secondary-soft); border-color: color-mix(in srgb, var(--pw-secondary) 35%, transparent); }

  .parity__extras td {
    padding-block: .55rem;
    font-size: .78rem;
    color: var(--pw-fg-faint);
    border-block-start: 1px solid var(--pw-border);
  }

  .parity__extras code { font-family: var(--pw-font-mono); font-size: .74rem; color: var(--pw-fg-meta); }


  @media (width < 40rem) {
    .parity__kind, .parity__since { display: none; }


    .parity-class__summary { flex-wrap: wrap; gap: .5rem .8rem; }


    .parity-class__php { overflow-wrap: anywhere; min-inline-size: 0; }

    .parity-class__score {

      margin-inline-start: 0;
      inline-size: 100%;
    }


    .parity__meter { inline-size: 4rem; }
  }



  .parity__colophon {
    margin-block-start: 1.75rem;
    font-size: .82rem;
    color: var(--pw-fg-faint);
  }

  .parity__colophon a { color: var(--pw-fg-meta); text-decoration: underline; text-underline-offset: .2em; }
  .parity__colophon code { font-family: var(--pw-font-mono); font-size: .78rem; }

  .parity__empty { color: var(--pw-fg-meta); }
  .parity__empty code { font-family: var(--pw-font-mono); }
}