@layer components {
  .feedback-review {
    gap: clamp(var(--space-5), 5vw, var(--space-7));
    min-width: 0;
    padding-block: var(--space-4) var(--space-8);
  }

  .feedback-review__header {
    align-items: end;
  }

  .feedback-review__header .page__intro {
    max-width: 68ch;
  }

  .feedback-review__filters,
  .feedback-review__section {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    padding-block: var(--space-5);
    border-top: 1px solid var(--color-border);
  }

  .feedback-review__section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
  }

  .feedback-review__section-heading h2 {
    font-size: clamp(1.35rem, 1.15rem + .55vw, 1.75rem);
  }

  .feedback-review__filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
  }

  .feedback-review__filter-form > div {
    display: grid;
    gap: var(--space-2);
    min-width: min(13rem, 100%);
  }

  .feedback-review__filter-form label {
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
    font-weight: 700;
  }

  .feedback-review__filter-form select {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .feedback-review__filter-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: auto !important;
  }

  .feedback-entry-list,
  .feedback-cluster-list,
  .feedback-representative-list {
    display: grid;
    min-width: 0;
  }

  .feedback-entry-list__item,
  .feedback-cluster-list__item,
  .feedback-representative-list li {
    min-width: 0;
    border-top: 1px solid var(--color-border);
  }

  .feedback-entry-list__item:first-child,
  .feedback-cluster-list__item:first-child,
  .feedback-representative-list li:first-child {
    border-top: 0;
  }

  .feedback-entry-row,
  .feedback-cluster-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, .65fr);
    gap: var(--space-5);
    min-width: 0;
    padding-block: var(--space-5);
  }

  .feedback-cluster-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(14rem, .6fr) minmax(16rem, .8fr);
  }

  .feedback-entry-row__body,
  .feedback-cluster-row__body,
  .feedback-cluster-row__score {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
  }

  .feedback-entry-row h2,
  .feedback-cluster-row h2 {
    max-width: 64ch;
    overflow-wrap: anywhere;
    font-size: clamp(1.2rem, 1.05rem + .4vw, 1.5rem);
  }

  .feedback-entry-row h2 a,
  .feedback-cluster-row h2 a {
    text-decoration-thickness: .06em;
  }

  .feedback-entry-row__context,
  .feedback-cluster-row__body > p {
    max-width: 68ch;
    color: var(--color-ink-muted);
    overflow-wrap: anywhere;
  }

  .feedback-review__state {
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
    font-weight: 700;
  }

  .feedback-review__muted {
    color: var(--color-ink-muted);
  }

  .feedback-review__facts {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
  }

  .feedback-review__facts > div {
    display: grid;
    grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.2fr);
    gap: var(--space-3);
    min-width: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }

  .feedback-review__facts > div:last-child {
    border-bottom: 0;
  }

  .feedback-review__facts dt {
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
  }

  .feedback-review__facts dd {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 650;
    text-align: right;
  }

  .feedback-review__facts time {
    font-variant-numeric: tabular-nums;
  }

  .feedback-review__facts--compact > div {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: var(--space-1);
  }

  .feedback-review__facts--score {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .feedback-review__facts--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }

  .feedback-review__facts--inline > div {
    display: flex;
    gap: var(--space-2);
    padding: 0;
    border: 0;
  }

  .feedback-review__facts--inline dd {
    text-align: left;
  }

  .feedback-cluster-row__score {
    padding-left: var(--space-5);
    border-left: 1px solid var(--color-border);
  }

  .feedback-cluster-row__score h3 {
    font-size: 1rem;
  }

  .feedback-review__bounded-note {
    margin-top: var(--space-3);
  }

  .feedback-review__empty {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding-block: var(--space-5);
  }

  .feedback-review__empty p {
    color: var(--color-ink-muted);
  }

  .feedback-entry-detail__message,
  .feedback-cluster-detail__summary {
    max-width: 76ch;
    overflow-wrap: anywhere;
    font-size: clamp(1.1rem, 1rem + .3vw, 1.3rem);
    line-height: 1.55;
  }

  .feedback-entry-detail__message {
    padding-block: var(--space-4);
    border-block: 1px solid var(--color-border);
    white-space: pre-wrap;
  }

  .feedback-entry-detail__facts,
  .feedback-cluster-detail__facts {
    max-width: 60rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .feedback-representative {
    display: grid;
    gap: var(--space-3);
    padding-block: var(--space-4);
  }

  .feedback-representative > p {
    max-width: 76ch;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  @media (max-width: 70rem) {
    .feedback-cluster-row {
      grid-template-columns: minmax(0, 1.1fr) minmax(14rem, .7fr);
    }

    .feedback-cluster-row__score {
      grid-column: 1 / -1;
      padding-top: var(--space-4);
      padding-left: 0;
      border-top: 1px solid var(--color-border);
      border-left: 0;
    }
  }

  @media (max-width: 48rem) {
    .feedback-entry-row,
    .feedback-cluster-row {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-4);
    }

    .feedback-cluster-row__score {
      grid-column: auto;
    }

    .feedback-review__facts--score,
    .feedback-entry-detail__facts,
    .feedback-cluster-detail__facts {
      grid-template-columns: minmax(0, 1fr);
    }

    .feedback-review__facts > div {
      grid-template-columns: minmax(7rem, .9fr) minmax(0, 1.1fr);
    }

    .feedback-review__facts dd {
      text-align: left;
    }

    .feedback-review__filter-form > div {
      width: 100%;
      min-width: 0;
    }

    .feedback-review__filter-actions {
      width: 100% !important;
    }
  }
}