@layer components {
  .sl-commissions {
    @apply space-y-6;
  }

  .sl-commissions__hero {
    @apply grid gap-4 rounded-[24px] border border-[#dfe7f6] bg-white p-5 md:p-7;
  }

  .sl-commissions__hero-copy {
    @apply min-w-0;
  }

  .sl-commissions__eyebrow {
    @apply mb-2 text-[12px] font-extrabold uppercase tracking-[0.22em] text-[#4d80d0];
  }

  .sl-commissions__hero h1 {
    @apply m-0 text-[30px] font-black leading-[1.08] text-[#1f2c46] md:text-[40px];
  }

  .sl-commissions__lede {
    @apply mt-3 max-w-[760px] text-[15px] leading-7 text-[#5d6880];
  }

  .sl-commissions__hero-metrics {
    @apply grid gap-3 md:grid-cols-3;
  }

  .sl-commissions__hero-metric {
    @apply rounded-[20px] border border-[rgba(255,255,255,0.8)] bg-white/85 px-4 py-4;
    box-shadow: 0 16px 32px rgba(83, 100, 136, 0.08);
  }

  .sl-commissions__hero-metric span {
    @apply block text-[12px] font-bold uppercase tracking-[0.14em] text-[#7a86a1];
  }

  .sl-commissions__hero-metric strong {
    @apply mt-3 block text-[32px] font-black leading-none text-[#24324b];
  }

  .sl-commissions__grid {
    @apply grid gap-4 xl:grid-cols-2;
  }

  .sl-commissions__advice-grid {
    @apply grid gap-6 xl:grid-cols-2;
  }

  .sl-commissions__pagination {
    @apply mt-2;
  }

  .sl-commissions__panel {
    @apply h-full;
  }

  .sl-commission-card {
    @apply space-y-5;
  }

  .sl-commission-card__meta {
    @apply flex flex-wrap items-center gap-3;
  }

  .sl-commission-card__badge {
    @apply inline-flex items-center rounded-full px-3 py-1.5 text-[12px] font-bold uppercase tracking-[0.08em];
  }

  .sl-commission-card__badge.is-active {
    @apply bg-[#e5f7ef] text-[#177a57];
  }

  .sl-commission-card__badge.is-inactive {
    @apply bg-[#f5f7fb] text-[#66738e];
  }

  .sl-commission-card__period {
    @apply text-[13px] font-semibold text-[#66738e];
  }

  .sl-commission-card__description {
    @apply m-0 text-[15px] leading-7 text-[#5d6880];
    overflow-wrap: anywhere;
  }

  .sl-commission-card__subject {
    @apply rounded-[18px] border border-[#ebeff8] bg-[linear-gradient(180deg,#fbfcff,#f7faff)] px-4 py-4;
  }

  .sl-commission-card__subject span {
    @apply block text-[12px] font-bold uppercase tracking-[0.12em] text-[#7a86a1];
  }

  .sl-commission-card__subject strong,
  .sl-commission-card__subject a {
    @apply mt-2 block text-[15px] font-extrabold text-[#24324b];
    overflow-wrap: anywhere;
  }

  .sl-commission-card__subject a {
    @apply text-[#3f68a8] no-underline transition-colors duration-200;
  }

  .sl-commission-card__subject a:hover {
    @apply text-[#2c5186];
  }

  .sl-commission-card__footer {
    @apply space-y-4;
  }

  .sl-commission-card__members-meta {
    @apply flex items-end justify-between gap-3 rounded-[18px] border border-[#ebeff8] bg-[linear-gradient(180deg,#fbfcff,#f7faff)] px-4 py-4;
  }

  .sl-commission-card__members-meta span {
    @apply text-[12px] font-bold uppercase tracking-[0.12em] text-[#7a86a1];
  }

  .sl-commission-card__members-meta strong {
    @apply text-[26px] font-black leading-none text-[#24324b];
  }

  .sl-commission-card__members {
    @apply grid gap-3;
  }

  .sl-commission-member {
    @apply flex items-center justify-between gap-3 rounded-[18px] border border-[#ebeff8] bg-white px-4 py-3;
  }

  .sl-commission-member__copy {
    @apply min-w-0;
  }

  .sl-commission-member__copy strong {
    @apply block text-[15px] font-extrabold text-[#24324b];
    overflow-wrap: anywhere;
  }

  .sl-commission-member__copy span {
    @apply mt-1 block text-[13px] font-medium text-[#66738e];
    overflow-wrap: anywhere;
  }

  .sl-commission-member__party {
    @apply inline-flex shrink-0 items-center rounded-full bg-[#eef4ff] px-3 py-1.5 text-[12px] font-bold uppercase tracking-[0.08em] text-[#3f68a8];
  }

  .sl-commissions__empty {
    @apply rounded-[22px] border border-dashed border-[#dce3f2] bg-[#fbfcff] px-6 py-10 text-center;
  }

  .sl-commissions__empty.is-inline {
    @apply px-4 py-5 text-left;
  }

  .sl-commissions__empty h2 {
    @apply m-0 text-[22px] font-extrabold text-[#24324b];
  }

  .sl-commissions__empty.is-inline h2 {
    @apply text-[16px];
  }

  .sl-commissions__empty p {
    @apply mt-3 mb-0 text-[15px] leading-7 text-[#6c7892];
  }

  .sl-commissions__empty.is-inline p {
    @apply mt-2 text-[14px] leading-6;
  }

  @media (max-width: 1023px) {
    .sl-commissions__grid,
    .sl-commissions__advice-grid {
      @apply grid-cols-1;
    }
  }

  @media (max-width: 767px) {
    .sl-commissions {
      @apply space-y-5;
    }

    .sl-commissions__hero {
      @apply rounded-[20px] p-4;
    }

    .sl-commissions__hero h1 {
      @apply text-[28px];
    }

    .sl-commissions__lede {
      @apply text-[14px] leading-6;
    }

    .sl-commissions__hero-metric strong {
      @apply text-[28px];
    }

    .sl-commission-member {
      @apply flex-col items-start;
    }

    .sl-commission-member__party {
      @apply shrink-0 self-start;
    }

    .sl-commission-card__members-meta {
      @apply items-start;
    }
  }

  @media (max-width: 479px) {
    .sl-commissions__hero {
      @apply p-3.5;
    }

    .sl-commissions__hero h1 {
      @apply text-[24px];
    }

    .sl-commissions__hero-metric {
      @apply px-3.5 py-3;
    }

    .sl-commissions__hero-metric strong {
      @apply text-[24px];
    }
  }
}