@layer components {
  .consent-tray {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 80;
    background: var(--dgv-paper);
    border-block-start: 3px solid var(--dgv-cyclamen);
    box-shadow: 0 -8px 24px rgba(22, 19, 15, 0.18);
  }

  .consent-tray[hidden] {
    display: none;
  }

  .consent-tray .inner {
    inline-size: min(100% - (var(--dgv-gutter)), var(--dgv-content));
    margin-inline: auto;
    padding-block: var(--dgv-space-md);
    display: grid;
    gap: var(--dgv-space-sm);
  }

  @media (min-width: 900px) {
    .consent-tray .banner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--dgv-space-md);
      align-items: center;
    }
  }

  .consent-tray p {
    font-size: var(--dgv-step--1);
    max-inline-size: 70ch;
  }

  .consent-tray .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dgv-space-2xs);
  }

  .consent-panel {
    border-block-start: 1px dashed var(--dgv-border);
    padding-block-start: var(--dgv-space-sm);
    display: grid;
    gap: var(--dgv-space-sm);
  }

  .consent-panel[hidden] {
    display: none;
  }

  .consent-cats {
    display: grid;
    gap: var(--dgv-space-2xs);
    grid-template-columns: 1fr;
  }

  @media (min-width: 720px) {
    .consent-cats {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .consent-cat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--dgv-space-2xs);
    align-items: start;
    border: 2px solid var(--dgv-border);
    border-radius: var(--dgv-radius-md);
    padding: var(--dgv-space-2xs) var(--dgv-space-xs);
  }

  .consent-cat input {
    inline-size: 22px;
    block-size: 22px;
    margin-block-start: 3px;
  }

  .consent-cat .name {
    font-weight: 700;
  }

  .consent-cat .desc {
    font-size: var(--dgv-step--1);
    color: var(--dgv-ink-soft);
  }

  .consent-cat input:disabled {
    accent-color: var(--dgv-forest);
  }
}