@layer components {
  .pin-tray {
    inset: auto auto var(--block-space-half) var(--inline-space);

    .pin {
      --z: calc(10 - var(--position));

      container-type: inline-size;
      font-size: 10px;

      &:nth-child(7) { --position: 7; }
      &:nth-child(8) { --position: 8; }
      &:nth-child(9) { --position: 9; }
      &:nth-child(10) { --position: 10; }

      &:nth-child(1n + 11) { display: none; }
    }

    .avatar,
    .card__tags,
    .card__meta .btn,
    .card__meta-item:not(.card__meta-item--updated),
    .workflow-stage:not(.workflow-stage--current),
    .card__closed {
      display: none;
    }

    .card {
      --block-space: 1em;
      --block-space-half: 0.5em;
      --text-xx-large: 2em;

      border: 1px solid var(--color-canvas);
      view-transition-name: unset !important;
    }

    .card__collection {
      padding-block: 0.25ch;
    }

    .card__body {
      display: block;
      padding-block-end: 0;
    }

    .card__link {
      z-index: 1;
    }

    .card__title {
      --lines: 1;
    
      font-size: var(--text-small);
      font-weight: bold;
      min-block-size: 0;
    }

    .card__stages {
      padding: 0;
    }

    .card__meta-item--updated {
      border: 0;
      font-size: var(--text-x-small);
      opacity: 0.66;
      padding: 0;
      text-transform: none;

      .local-time-value {
        font-weight: normal;
      }
    }

    .workflow-stage--current {
      background: none;
      border: 1px solid currentColor;
      color: var(--color-ink);
      inline-size: fit-content;
      inset: 0 0 auto auto;
      position: absolute;
    }
  }
}