@layer components {
  .catalog {
    h1 {
      margin: 0 0 var(--space-2xs);
      font-family: var(--font-display);
      font-size: var(--step-2);
    }

    .lead { margin-block: 0 var(--space-xs); }

    .catalog-tools {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: var(--space-2xs);
      margin-block: 0 var(--space-s);
    }

    .composer {
      flex: 1 1 100%;
      border-block-start: 0;
      border: thin solid color-mix(in oklch, var(--ink) 16%, var(--mist));
      border-radius: var(--radius);
    }

    .sort-picks {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);

      .purge-unused-form { display: contents; }

      a, .purge-unused {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-block-size: var(--touch);
        padding-inline: var(--space-s);
        border: thin solid var(--mist);
        border-radius: var(--radius-s);
        font-weight: 600;
      }

      .purge-unused {
        border-color: color-mix(in oklch, var(--paprika) 35%, var(--mist));
        background: color-mix(in oklch, var(--paprika) 6%, var(--paper));
        color: var(--ink);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
      }

      a {
        color: var(--muted);
        text-decoration: none;

        &[aria-current="true"] {
          background: var(--dusk);
          color: var(--cream);
          border-color: var(--dusk);
        }
      }
    }

    .pack-liquid {
      display: flex;
      align-items: center;
      gap: 0.35em;
      margin-block-start: 0.2em;
      min-block-size: var(--touch);
      font-size: 0.85em;
      font-weight: 500;
      color: var(--muted);

      input[type="checkbox"] { flex: none; }
    }
  }
}